0

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

<div style="opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;">
   <p style="font-size: 4em; font-family: verdana; font-weight: blod; text-align: center; color: rgba(112,79,196,1); text-shadow: 5px 5px 2px #000; padding: 10px;"> Special Effects</p>
</div>

and in the internal CSS style CSS:

div:hover {background-color: red;}

But it didn't work till I deleted the style from the div element and created a HTML element selector in the internal style like this:

    div {opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;}
    div:hover {background-color: red;}

then it worked, but can anyone tell me why it didn't work the first time ?

Felix A J
  • 6,300
  • 2
  • 27
  • 46
Taro_Naza
  • 1
  • 5

2 Answers2

3

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

div:hover {background-color: red !important;}
Felix A J
  • 6,300
  • 2
  • 27
  • 46
0

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:

Community
  • 1
  • 1
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252