Changing parent element using CSS
When I have
<ul class="menu">
<li><a href="bla">link</a></li>
</ul>
how开发者_JS百科 do I make the LI-tag change a property (e.g. list-style-image) when is hovered (a:hover)?
You can apply hover
to the li
as well:
ul.menu li:hover
{
list-style-image: url(highlight.gif);
}
Note (Thanks to Andy E): :hover
is not supported in IE6, and supported for links only in IE7. (See compatibility table here). There is a workaround for IE6 and 7 named whatever:hover.
On modern browsers you can use li:hover
but on older ones you would have to use javascript.
Edit: By the way, if you set:
a {
display:block;
}
you can do all the styling on the a
and you don´t need to style the li
.
You can give add directly into anchor element which is sub element of li element
li a:hover { ..style.. }
Or you can add a class for anchor to do that
li a.HoverClass:hover { ..style.. }
There is a basic example here
精彩评论