Hover not working CSS

Question

Why my hover button not working in css?

https://code.sololearn.com/W5WRuhW7D7U2/?ref=app

Answer 1

If you use !important the precedence of the rule becomes higher than any others, and you couldn't no more update the value by setting the style attribute dynamically with JS...

You better have to augment more "naturally" the selector precedence (by adding specifities to the selector).

Anyway, if I remove both !important from your #main button:hover css rule, the :hover effect works fine... doesn't know what you tried to fix, so ;)

Answer 2

The easiest solution would be to write:
button:hover{
background-color: #ffffff !important;
}
In a real project you probably don't want every button to behave like this. So you could create a class called "hover-button" for example and write this:
.hover-button:hover{
background-color: #ffffff !important;
}

Answer 3

The "button:hover" selector has less priority than the "#main button" selector and therefore the hover does not override the background-color attribute. To solve this you could add !important to the CSS instructions in the :hover selector. But I wouldn't recommend using !important too often in a real project or website.

Answer 4

Aaron Eberhardt So what should I do now?

Answer 5

Aaron Eberhardt What is the problem if we use ! important property??

Answer 6

This article might help you:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity