悬停并单击->更改颜色，再次单击切换到原始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;

}