[solved] CSS a:hover li

[ahmz 28]

I'm a bit confused and I need some help please.

I have the feeling this code is wrong but I'm not sure how to fix it.

Basically the <li> are graphical buttons, and the whole <li> block should be linked and the hover effect should work.

It works in Chrome and Opera but not in Firefox.

Any help appreciated :)

#menu-top ul {
 float:left;
 padding:0;
 margin:0;
 background:url(images/menu-top-separator.png) no-repeat center right;
}
#menu-top li {
 float:left;
 list-style:none;
 width:120px;
 height:50px;
 background:url(images/menu-top-titles.png) no-repeat 0 0;
}

#menu-top li.one { background-position:center 0px; }
#menu-top li.two { background-position:center -50px; }
#menu-top li.three { background-position:center -150px; }
#menu-top li.four { background-position:center -200px; }

#menu-top a:hover li.one { background-position:center -250px; }
#menu-top a:hover li.two { background-position:center -300px; }
#menu-top a:hover li.three { background-position:center -400px; }
#menu-top a:hover li.four { background-position:center -450px; }

<div id="menu-top">
        <ul><a href="#"><li class="one"></li></a></ul>
        <ul><a href="#"><li class="two"></li></a></ul>
        <ul><a href="#"><li class="three"></li></a></ul>
        <a href="#"><li class="four"></li></a>
</div>

[zhangm 1,333]

<div id="menu-top">
<ul>
<li class="one"><a href="#">One</a></li>
<li class="two"><a href="#">Two</a></li>
<li class="three"><a href="#">Three</a></li>
</ul>
</div>

If you want the list items to hover individually, apply the hover to the list item. If you want the entire list to hover, apply the hover to the div or the unordered list.

[ahmz 28]

I want to link the entire <li> block, not the text inside it (there is none).

[Cupcakes 151]

<ul>
<li><a href="#">Link</a></li>
</ul>

ul {
}
ul li {
 display: inline;
 float: left;
}
ul li a {
  display: block;
}

You can't link a list item. Link must be in the block element.

[ahmz 28]

Thanks :)

New working code:

#menu-top ul {
 margin:0;
 padding:0;
 list-style:none;
}
#menu-top li {
 float:left;
 background:url(images/menu-top-separator.png) no-repeat center right;
}
#menu-top a {
 float:left;
 width:120px;
 height:50px;
 text-decoration:none;
 background:url(images/menu-top-titles.png) no-repeat 0 0;
}

#menu-top a.one { background-position:center 0px; }
#menu-top a.two { background-position:center -50px; }
#menu-top a.three { background-position:center -150px; }
#menu-top a.four { background-position:center -200px; }

#menu-top a:hover.one { background-position:center -250px; }
#menu-top a:hover.two { background-position:center -300px; }
#menu-top a:hover.three { background-position:center -400px; }
#menu-top a:hover.four { background-position:center -450px; }

        <div id="menu-top">
            <ul>
                <li><a href="#1" class="one"></a></li>
                <li><a href="#2" class="two"></a></li>
                <li><a href="#3" class="three"></a></li>
                <a href="#4" class="four"></a>
            </ul>
        </div>

[Calculator 22]

For accessibility, you're better off putting some text inside the link. Screen readers won't know what your links are for without a link label and when you disable CSS and JavaScript, your HTML should still provide enough information to use the website in some way. And if that doesn't convince you: it makes your HTML more "semantic". :)

You can always hide the text through CSS and use the background image instead. This method is known as image replacement and can work as followed:

#menu-top a {
 float:left;
 width:120px;
 height:50px;
 text-decoration:none;
 background:url(images/menu-top-titles.png) no-repeat 0 0;
 text-indent: -9999px;
}

And then just put a useful label for your links

<div id="menu-top">
   <ul>
      <li><a href="#1" class="one">First link label</a></li>
   </ul>
</div>

By using text-indent with a high negative value, you're pushing the text out of the viewable area, effectively hiding it for the user. However, screen readers can still read the link label and the label will show just fine when CSS is disabled. There are other ways to do this, but this is by far the most commonly used (and in my opinion the best) way to do it.

[ahmz 28]

Thanks for the tip, I'll do that :)

[zhangm 1,333]

        <div id="menu-top">
            <ul>
                <li><a href="#1" class="one"></a></li>
                <li><a href="#2" class="two"></a></li>
                <li><a href="#3" class="three"></a></li>
                <a href="#4" class="four"></a>
            </ul>
        </div>

Why have you placed a non-list-item inside an unordered list tag?