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

Question

I have six elements and they should change in colors when I hover into the three buttons at the bottom. Not only when I hover onto them, but when I click on to the button, the elements should stay changed in color, and on next click, I want it to go back to black.

I succeeded that the elements change colors when hover into the buttons, but I have trouble making it stay changed when it is clicked.

And on top of everything, the elements change to white when hover into the elements it self(not by the buttons on the bottom).

Here is the link of what I tried:

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; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg class="geomap" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1331.7 883" style="enable-background:new 0 0 1331.7 883;" xml:space="preserve"> <g id="colony_projects"> <circle class="colony_element" cx="618" cy="411.2" r="8"/> <circle class="colony_element" cx="666.8" cy="274.8" r="8"/> </g> <g id="prison_projects"> <circle class="prison_element" cx="461.2" cy="156.6" r="8"/> <circle class="prison_element" cx="456.9" cy="163.5" r="8"/> </g> <g id="open_projects"> <circle class="open_element" cx="522.8" cy="275.8" r="8"/> <circle class="open_element" cx="352.8" cy="451" r="8"/> </svg> <div class="timeline"> <div class="timetext"> <div class="colony"> <div class="colony_button">&#11044;</div> </div> <div class="prison"> <div class="prison_button">&#11044;</div> </div> <div class="open"> <div class="open_button">&#11044;</div> </div> </div> </div> 

Answer 1

There are several modifications I made to your original code to make it work:

• Fixed the missing closing </g> in the SVG markup
• Registered click listeners in addition to the hover where a class active is toggled
• Added CSS rules for the .active state of the dots
• Instead of setting the color to black explicitly on mouse out, just reset the css property by setting it to an empty string, therefore you don't need the !important on the :hover for colouring the dots in white

You might also want to change all the setting of color/fill via JS to adding and removing a class on hover/mouse out, so you can set the colours in a single place via CSS.

 $(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', ""); $(this).css('color', ""); }).click(function() { $(".colony_element").toggleClass('active'); }); $(".prison_button").hover( function() { //mouse over $(this).css('color', '#3268bf'); $(".prison_element").css('fill', '#3268bf'); }, function() { //mouse out $(this).css('color', ""); $(".prison_element").css('fill', ""); }).click(function() { $(".prison_element").toggleClass('active'); }); $(".open_button").hover( function() { //mouse over $(this).css('color', '#e4cb3e'); $(".open_element").css('fill', '#e4cb3e'); }, function() { //mouse out $(this).css('color', ""); $(".open_element").css('fill', ""); }).click(function() { $(".open_element").toggleClass('active'); }); }); 

 .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.active { fill: #b8aa85; } .prison_element.active { fill: #3268bf; } .open_element.active { fill: #e4cb3e; } .colony_element:hover, .open_element:hover, .prison_element:hover { fill: white; transition: 0.8s; cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg class="geomap" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1331.7 883" style="enable-background:new 0 0 1331.7 883;" xml:space="preserve"> <g id="colony_projects"> <circle class="colony_element" cx="618" cy="411.2" r="8"/> <circle class="colony_element" cx="666.8" cy="274.8" r="8"/> </g> <g id="prison_projects"> <circle class="prison_element" cx="461.2" cy="156.6" r="8"/> <circle class="prison_element" cx="456.9" cy="163.5" r="8"/> </g> <g id="open_projects"> <circle class="open_element" cx="522.8" cy="275.8" r="8"/> <circle class="open_element" cx="352.8" cy="451" r="8"/> </g> </svg> <div class="timeline"> <div class="timetext"> <div class="colony"> <div class="colony_button">&#11044;</div> </div> <div class="prison"> <div class="prison_button">&#11044;</div> </div> <div class="open"> <div class="open_button">&#11044;</div> </div> </div> </div> 

Answer 2

There is too much to go through in the original code. So, I'll give you the simplified version of what you need.

https://jsfiddle.net/2hjm0tnb/

In a nutshell, you want to create a new class and operate with it.

Let's say these are 3 elements you are working with. you want them to have the same class to shorten the code

<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div> 

In css, we use the original class for original styling and add another class for the change

.testclass {
  background-color:#ccc;
  width:50px;
  height:50px;
  margin-top:10px;
}
.active {background-color:#000;}


// here we say that this will work for every element with original class
$(".testclass").each(function(){
//here we declare counter to count number of clicks
    var counter = 1;
//add class with changed style on mouse over 
  $(this).mouseover(function(){
    $(this).addClass('active');
  });
// this will define actions on click
  $(this).click(function(){
//add 1 to counter
    counter++;
//if counter is odd, it will add the class. If not- will do nothing
    if (counter % 2 == 1) {
        $(this).toggleClass('active');
    }
  });
});