0

For some reason I can't get the hover state of this div to work for a button I created within a Wordpress page:

<div class="signupbutton" style="font-size: 28px; background-color: #5aaf20; color: white; text-align: center; font-family: 'Oswald', Arial, Helvetica; padding: 25px 50px; box-shadow: 1px 1px 5px #b7b9b5; margin: 0% 30%;">SIGN-UP</div>

<style> 
div.signupbutton:hover {background-color: #80f133;}
</style>

If I replace the hover's property (i.e. to a border) it works fine. What gives?

Improve this question

2 Answers 2

Reset to default
2

That's because inline styles override your :hover styles. You can learn more about selectors' specificity reading the spec.

Better separate presentation from content and place inline styles in the stylesheet:

div.signupbutton {
    font-size: 28px;
    background-color: #5aaf20;
    color: white;
    text-align: center;
    font-family: 'Oswald', Arial, Helvetica;
    padding: 25px 50px;
    box-shadow: 1px 1px 5px #b7b9b5;
    margin: 0% 30%;
}
div.signupbutton:hover {
    background-color: #80f133;
}
Improve this answer
3
  • I started adding an answer, but Oriol's is presented much better than mine was so I +1'd his instead.
    – Peter Lange
    Commented May 5, 2014 at 23:17
  • I thought so. What's the easiest way to do this with a Wordpress page?
    – naturligt
    Commented May 5, 2014 at 23:19
  • @naturligt Not sure since I don't have Wordpress. But just add the code where you used your :hover rule.
    – Oriol
    Commented May 5, 2014 at 23:22
0

The example below works, but the way that @Oriol did is better.

div.signupbutton:hover {background-color: #80f133 !important;}
Improve this answer
1
  • @naturligt In your case you can use "!important" but if you have a big application, you can do it otherwise... to become more organized.
    – Guilherme Natal de Mello
    Commented May 5, 2014 at 23:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.