Reputation: 233
I have a <li>
that contains an <a href>
<li><a href="http://site.com">Page</a></li>
I'd like to change the background color and text color of each <li>
item as it's hovered over. I found that the background color is best changed by targetting the li:hover
and not the a:hover
because the a:hover
changes the background of only a small portion of the line (the part that has the <a>
text).
li:hover { background-color:green; }
What I'd also like to do is change the font color (that's the <a>
). When I do it the first way below, it has no effect on the <a>
text color. And when I do it the second way below, I'd have to hover specifically on the <a>
for the font color to change, not just anywhere in the <li>
bullet line.
li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way
Is there a way with css to change the font color of the contained <a href>
when the <li>
is hovered over? again, this is what the html markup looks like:
<li><a href="http://site.com">Page</a></li>
Upvotes: 23
Views: 42927
Reputation: 536359
The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>
:
li a { display: block; }
li a:hover { background-color: green; }
Upvotes: 21
Reputation: 28665
li:hover a { color: red }
:hover documentation.
IE5/6 only support :hover on links, so make sure you're not testing on those browsers.
Upvotes: 49