[solved] CSS a:hover li

[ahmz]

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 Supervisor]

<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]

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

[Cupcakes]

<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]

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]

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]

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

[zhangm Supervisor]

  On 16/06/2010 at 17:55, م ahmz said:

        <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?