Changing parent element using CSS

Question

When I have

<ul class="menu">
 <li><a href="bla">link</a></li>
</ul>

how do I make the LI-tag change a property (e.g. list-style-image) when is hovered (a:hover)?

Answer 1

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.

Answer 2

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.

Answer 3

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