• 0

[solved] CSS a:hover li


Question

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;

Link to comment
https://www.neowin.net/forum/topic/911256-solved-css-ahover-li/
Share on other sites

7 answers to this question

Recommended Posts

  • 0

&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.

  • 0

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;

  • 0

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.

  • 0
  On 16/06/2010 at 17:55, ู… ahmz said:

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Is that the one that's perfect in every way except it doesn't have NFC?
    • It does to some extent. You can share your screen in the voice mode. And it can see what you are working on.
    • Jony Ive is reportedly working on multiple AI devices for OpenAI, including a mobile gadget by Hamid Ganji Last month, OpenAI announced acquiring Jony Ive's startup, io, in a $6.5 billion deal. Ive, who served as Apple's design chief for over two decades, moved to OpenAI to work on the company's AI hardware projects. While the details of these projects have remained relatively untold, Mark Gurman's Power On newsletter revealed some exciting insights about Jony Ive's work at OpenAI. According to Gurman, Apple's former design chief is now spearheading a series of groundbreaking AI hardware products for OpenAI. One of these under-development devices is described as a "mobile gadget" that takes the form of a "pendant" and can be worn around the neck. This device could allegedly allow users to access ChatGPT with voice commands. Another of Ive's works at OpenAI is a home device that functions similarly to a smart speaker. Users can put the device on a table and perform various tasks using OpenAI's ChatGPT. Interestingly, OpenAI also has a robot device under development. As Gurman says, this robot "will likely be a machine that develops a relationship with a human using AI." However, OpenAI's robot is still far from being made available on the market. After acquiring Jony Ive's startup, OpenAI CEO Sam Altman described Ive as the best designer in the world, adding that they can now work on the next generation of AI-powered computers. More details about OpenAI-Ive hardware products could emerge over the next few months. OpenAI was already rumored to be working on a mysterious AI gadget, presumably a screenless AI phone, which might be the same mobile gadget that Gurman revealed. While details of this alleged AI mobile are yet unknown, such a device could pose an alternative to conventional smartphones, raising the alarm for smartphone makers such as Apple, Samsung, and Google. Meanwhile, Apple might already be expecting such a device, as its services chief Eddy Cue allegedly said during his testimony at Google's antitrust case that iPhones might no longer exist 10 years from now.
    • Seems Nintendo have already thought of that after the Joy-Con drift in the Switch 2 EULA: Clause 16 of the EULA reads: "This arbitration provision precludes you and Nintendo from suing in court, having a trial by jury, or participating in a class action. You and Nintendo agree that arbitration will be solely on an individual basis and not as a class arbitration, class action, or any other kind of representative proceeding. You and Nintendo are each waiving the right to trial by a jury."
    • Cool glass phone you have in that silicon case bro
  • Recent Achievements

    • First Post
      brynmot earned a badge
      First Post
    • Reacting Well
      brynmot earned a badge
      Reacting Well
    • Week One Done
      Al_ earned a badge
      Week One Done
    • Week One Done
      MadMung0 earned a badge
      Week One Done
    • Reacting Well
      BlakeBringer earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      477
    2. 2
      +FloatingFatMan
      274
    3. 3
      ATLien_0
      243
    4. 4
      snowy owl
      209
    5. 5
      Edouard
      185
  • Tell a friend

    Love Neowin? Tell a friend!