Why border is not changing on hover?

Question

Here is my code:

<html>
<head>
<style type="text/css">
   p:hover{border:2px solid red;}
</style>
</head>
<body>
   <p style="border:2px solid green;">This is a paragraph.</p>
</body>
</html>

I am confused: why is the border color not changing on hover?

score 5 · Accepted Answer · edited May 23 '17 at 12:13

5

Inline styles have a higher priority than any CSS rule that is not !important. So the solution is to mark the attributes in the p:hover rule as important:

p:hover {
    border:2px solid red !important;
}

Another option would be moving the initial style into the <style> tag, too.

p {
    border: 2px solid green;
}

p:hover {
    border: 2px solid red;
}

Here is a TL;DR-style explanation of CSS priorities and if you prefer something a bit longer you can also have a look at the relevant part of the CSS spec.

edited May 23 '17 at 12:13

Community

1
1

answered Mar 10 '13 at 18:54

ThiefMaster

310,957
84
592
636

You really shouldn't use important – Cody Guldner Mar 10 '13 at 18:58
Maybe he's stuck with that HTML code for some reason. In this case there wouldn't be another choice but to use `!important`. – ThiefMaster Mar 10 '13 at 18:59
Is it really necessary that `p:hover` is declared _after_ `p`? – drahnr Mar 10 '13 at 18:59
He could increase the specificity of the `hover` tag – Cody Guldner Mar 10 '13 at 18:59
1

You can't be more specific than an inline `style` attribute except by using `!important`... @drahnr: Nope.. just tested it and updated my answer. – ThiefMaster Mar 10 '13 at 19:00
Thanks for the answer. Its really good to know this `!important`. – user1390378 Mar 10 '13 at 19:09

score 2 · Answer 2 · answered Mar 10 '13 at 18:54

Inline styles have a higher priority than separate css sections

EDIT: sigh 2nd - just a tad too slow.

This should work - as far as I know !important is not considered good practice, so I'd suggest to use this approach:

<style type="text/css">
p{border:2px solid green;}
p:hover{border:2px solid red;}
</style>
<body>
<p>foobar</p>
</body>

score 1 · Answer 3 · answered Mar 10 '13 at 19:10

If you only have access to the CSS (say, because another department owns the HTML, or it's being introduced through another method), you'll have to use !important. Use of !important is absolutely fine, as it was intended to be a remedy to situations exactly like this. The idea of it being "bad practice" is wrong (unless you're using it to be lazy about your CSS specificity).

p:hover{border:2px solid red !important}

<body>
    <p style="border:2px solid green">foobar</p>
</body>

Browsers don't have a built-in CSS declaration for p:hover like they do for an a:hover, a:active, a:visited, etc; thus, the inline style in the HTML is the ONLY style being recognized at run-time. Unless... there's an !important available to give :hover a style.

Why border is not changing on hover?

3 Answers3