change background image of li on an a:hover

Question

I have a menu:

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)

I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.

Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.

Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.

Thanks in advance for any advice/help/suggestions.

Answer 1

From what I gather you cannot do what you are after in the way you have described it.

However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing

li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"

li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability

Answer 2

You can do this simply with:

<div id=menu>
   <ul>
     <li><a href=>Home</a></li>
   </ul>
</div>

Then in your CSS:

#menu ul li:hover{
   background-image:url(newimage);
}

If you require IE6 compliance, just make your links fill the entire width of the UL's.

#menu ul li a:link, #menu ul li a:visited{
    display:block;
    width:999px;  <-- enter pixels
    height:999px; <-- enter pixels
}

then modify the background image normally with:

#menu ul li a:hover{
    background-image:url(newimage);
}