在按钮单击块上调用JS函数CSS：悬停

Question

I implement a CSS hover method on all of my buttons. It looks like this:

.button:hover { background-color: #36a39c; }

This method works perfectly fine until I click on one of my buttons. When the button is clicked, a JS function is called using this code:

   <div id= "one"><button class="button" id = "b1" value="0" onclick="checker(this.id)"></button></div>

This is the JS Script:

var checker = function(id)
{
   var xyz = id; 
   var value = document.getElementById(xyz).value

   if (answerjson[value].is_right_choice==1)
   {
      for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';
      }
      document.getElementById(xyz).style.background='green';
      setTimeout(function(){ alert("Correct!"); }, 100);
   }
   else {
        for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';

        }
        document.getElementById(xyz).style.background='red';
        setTimeout(function(){ alert("Sorry, Try Again"); }, 100);

   }

}

After that script is called, my buttons no longer change color on hover. Any ideas why?

Answer 1

You're setting the inline style="" attribute in your JS code.

Properties set in inline styles always override CSS selectors (except with !important ), so your CSS no longer does anything.

You should add a CSS class instead of setting an inline style.

Answer 2

This happens because when you add background color using javascript it is added as inline styling and it overrides the css class selector because inline styling always takes more preference. You need to make a class with that color and add/remove that using javascript. eg make a class

.green{
   background-color: green;
}

and then add it using javascript like this:

document.getElementById(xyz).className += " green";