我有六個元素，當我將鼠標懸停在底部的三個按鈕中時，它們應該更改顏色。不僅當我將鼠標懸停在它們上時，而且當我單擊該按鈕時，這些元素的顏色都應保持不變，并且在下次單擊時，我希望它回到黑色。我成功地將元素懸停在按鈕上時會更改顏色，但是我無法使其在單擊時保持不變。并且在所有內容的頂部，將元素懸停在其自身的元素中（而不是通過底部的按鈕）時，元素將變為白色。這是我嘗試過的鏈接：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;}