• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[solved] CSS a:hover li

Question

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; }

&lt;div id="menu-top"&gt;
        &lt;ul&gt;&lt;a href="#"&gt;&lt;li class="one"&gt;&lt;/li&gt;&lt;/a&gt;&lt;/ul&gt;
        &lt;ul&gt;&lt;a href="#"&gt;&lt;li class="two"&gt;&lt;/li&gt;&lt;/a&gt;&lt;/ul&gt;
        &lt;ul&gt;&lt;a href="#"&gt;&lt;li class="three"&gt;&lt;/li&gt;&lt;/a&gt;&lt;/ul&gt;
        &lt;a href="#"&gt;&lt;li class="four"&gt;&lt;/li&gt;&lt;/a&gt;
&lt;/div&gt;

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
zhangm    1,333

&lt;div id="menu-top"&gt;
&lt;ul&gt;
&lt;li class="one"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
&lt;li class="two"&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
&lt;li class="three"&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

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.

Share this post


Link to post
Share on other sites
  • 0
ahmz    28

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

Share this post


Link to post
Share on other sites
  • 0
Cupcakes    151

&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
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; }

        &lt;div id="menu-top"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#1" class="one"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#2" class="two"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#3" class="three"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;a href="#4" class="four"&gt;&lt;/a&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

Share this post


Link to post
Share on other sites
  • 0
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

&lt;div id="menu-top"&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;a href="#1" class="one"&gt;First link label&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
ahmz    28

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

Share this post


Link to post
Share on other sites
  • 0
zhangm    1,333

        &lt;div id="menu-top"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#1" class="one"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#2" class="two"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#3" class="three"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;a href="#4" class="four"&gt;&lt;/a&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.