悬停并单击->更改颜色，再次单击切换到原始ccolor

Question

我有六个元素，当我将鼠标悬停在底部的三个按钮中时，它们应该更改颜色。不仅当我将鼠标悬停在它们上时，而且当我单击该按钮时，这些元素的颜色都应保持不变，并且在下次单击时，我希望它回到黑色。我成功地将元素悬停在按钮上时会更改颜色，但是我无法使其在单击时保持不变。并且在所有内容的顶部，将元素悬停在其自身的元素中（而不是通过底部的按钮）时，元素将变为白色。这是我尝试过的链接：https://jsfiddle.net/ge9bw5nm/4/$(document).ready(function() {  $(".colony_button").hover(    function() {      //mouse over      $(this).css('color', '#b8aa85');      $(".colony_element").css('fill', '#b8aa85');    },    function() {      //mouse out      $(".colony_element").css('fill', "#000000");      $(this).css('color', "#000000");    });  $(".prison_button").hover(    function() {      //mouse over      $(this).css('color', '#3268bf');      $(".prison_element").css('fill', '#3268bf');    },    function() {      //mouse out      $(this).css('color', "#000000");      $(".prison_element").css('fill', "#000000");    });  $(".open_button").hover(    function() {      //mouse over      $(this).css('color', '#e4cb3e');      $(".open_element").css('fill', '#e4cb3e');    },    function() {      //mouse out      $(this).css('color', "#000000");      $(".open_element").css('fill', "#000000");    });});.geomap {  top: 0;  width: 100%;  cursor: grab;}.timeline {  font-size: 2vw;  position: fixed;  bottom: 0;  left: 0;  background: rgba(204, 204, 204, 0.5);  padding: 1em 2em 1em 2em;  margin: 1em;  border-radius: 1.4em;  text-align: center;}.colonybutton,.prisonbutton,.openbutton {  width: 1em;  padding: 0.3em 4em 0 4em;  margin: 0;}.colony_button:hover,.prison_button:hover,.open_button:hover {  cursor: pointer;}.colony,.prison,.open {  display: inline-block;  /*margin-bottom: 1em;*/  padding: 0;}.colony_element,.open_element,.prison_element {  transition: 0.8s;}.colony_element:hover,.open_element:hover,.prison_element:hover {  fill: white ! important;  transition: 0.8s;  cursor: pointer;}