如何避免悬停和活动的CSS规则被javascript中以编程方式完成的CSS更改所重写？

Question

I have this code, changing the color of a button and turning it back to normal after less than a second

document.getElementById("someid").style.color="#000000";
var clickAnimationIntervalId = setInterval(function({
    document.getElementById("someid").style.color="#000000";
    clearInterval(clickAnimationIntervalId);
}, 400);

Works fine, but after this code is executed, "someid" doesn't change anymore color on hover and active, like this code changed the css color, in any case. How do I avoid this behaviour?

Answer 1

This behavior is correct.

To avoid this create a class that set the css of someid and add it also to the :hover and .active state in your css.

Example:

#someid.animationInterval {color:black}
#someid.animationInterval:hover,
#someid.animationInterval.active {*the same like your normal hover and active*}

Now you set animationInterval class via Javascript.

Answer 2

You can put on your css classes for hover and active the color attribute with !important. For example:

a:hover, a:active{
  color: #5fba7d!important;
}

Answer 3

This is because the JS is putting the your style to the button as inline . So it over rights your default style. If you want it to work you have to use !important to your style.

button:hover{
 background-color:green !important;
}

This will do your job.