Friends, the situation is this. There is:

<div class="test" onclick="check()">foo</div> <div class="test" onclick="check()">foo</div> <div class="test" onclick="check()">foo</div>

in CSS:

 .test{ background:#fff; } .test:hover{ background:#f5f5f5; }

in js

 function check() { $(".test").css({"background":"fff"}); }

FULL JS

 <script> function ChooseLine(el) { if(hexc($("#line"+el).css("background-color"))=="f5f5f5") { alert(hexc($("#line"+el).css("background-color"))); $("#line"+el).css({"background-color" : "#ffffff"}); } else { $(".linetable").css({"background-color" : "#ffffff"}); $("#line"+el).css({"background-color" : "#f5f5f5"}); } $("#closebutton").css({"display" : "block"}); $("#editbutton").css({"display" : "block"}); } function hexc(colorval) { var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); delete(parts[0]); for (var i = 1; i <= 3; ++i) { parts[i] = parseInt(parts[i]).toString(16); if (parts[i].length == 1) parts[i] = "0" + parts[i]; } return color = parts.join(""); } </script>

after clicking on any of the test hover disappeared in all elements. Can someone explain why, and how to get it back?

  • Paste the code so that you can execute it here. I copied it to jsfiddle.net - there are no problems there, hover does not disappear anywhere - humster_spb
  • Well, here is the full js that I have - WhoIsDT

1 answer 1

First, you have an error in the check function - you must put a pound sign in front of the FFF so that it is:

 $(".test").css({"background":"#fff"});

Secondly, the hovering style disappears because background: #FFF registered in the style attribute, and inline styles have the highest priority, because the CSS does not apply color.

If you need to change color when clicking on an element, then I recommend that you add a class that has the appropriate styles. Also, if I understand the logic correctly, you want that when you click on an element, only the color of it changes, but not all elements with the test class, therefore, all the code will look like this:

 function check(el) { $(el).addClass('selected'); } 
 .test { background: #fff; } .test:hover { background: #f5f5f5; } .selected { background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test" onclick="check(this)">foo</div> <div class="test" onclick="check(this)">foo</div> <div class="test" onclick="check(this)">foo</div>

  • Thanks helped! The logic is about the same as you said, but you still need to reset the color if the color has already been applied to a specific element. but I myself already. thanks!) - WhoIsDT