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 ?

Improve this question
4
  • working jsfiddle.net/soledar10/7zjsdzyq Commented Jun 20, 2015 at 16:08
  • 1
    May be answer to your Question : stackoverflow.com/questions/1033156/… @Taro_NAZA Commented Jun 20, 2015 at 16:12
  • @Taro_Naza My pleasure dear Commented Jun 20, 2015 at 16:20
  • @afelixj it works but adding !important ... thanks Commented Jun 20, 2015 at 16:25

2 Answers 2

Reset to default
4

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

div:hover {background-color: red !important;}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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:

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.