hover property in CSS doesn't work when I have an inline styles

Question

I was work on a HTML document and I wanted to use the hover property for a HTML: div element but it didn\'t work. here the HTML div and the CSS style I used

<         


        

Answer 1

Inline styles can be overridden by !important, as they take up more importance.

div:hover {background-color: red !important;}

Something a bit about the specificity.

Since you have the style attribute, it overrides all the other things! It is a sin to use !important:

Answer 2

Inline style have the highest priority. If you need to override in CSS, need to use !important

div:hover {background-color: red !important;}