• 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

    • Windows 11 is getting a useful new audio feature by Taras Buria Photo: phamtu1509 Windows 11, in its current form, does not offer a quick and easy way to play audio over more than one device. If you have a bunch of audio devices connected and you want to play music on all of them, you have to tinker with third-party software to make it work. Apparently, Microsoft wants to change that with a new feature coming soon to Windows 11. @phantomofearth, the ever-giving source of Windows insights, discovered that the latest Windows 11 preview builds have a hidden toggle in quick settings that lets you share audio to multiple devices with just a few clicks. All it takes is clicking "Shared Audio" in the control center, selecting two or more available devices, and pressing "Share." As usual, there are no official announcements yet, so details about this feature remain unknown. Still, you can probably expect the new shared audio feature to make it to a Windows 11 preview build in the near future. In other Windows Insider news, Microsoft recently revealed that one of the recent taskbar changes was pulled from the operating system due to negative feedback. The company experimented with a simplified taskbar tray area, but later decided to nuke it because people did not like it. Still, there are plenty of other features coming soon to Windows 11. Check out our recent top 10 list here. Hopefully, all of them will make it to the Stable channel soon.
    • Chinese? It sounds extremely dangerous. I’ll reconsider buying a Meta Quest 3.
    • - What's your salary? Is it more than $100k a year? - Nah, it's $100 mil a year.
    • Compared to my ear buds which are the size of a matchbox, cover a much broader frequency range, and work everywhere without setup? Yeah, still not buying this as a replacement.
    • Meta's Superintelligence team staffed by 50% Chinese talent, 40% ex-OpenAI by Hamid Ganji Mark Zuckerberg's latest big bet at Meta involves building a team of the best AI superstars in the market to lead the so-called Superintelligence Labs. The goal of this team is to develop AI models that will ultimately lead to Artificial General Intelligence (AGI). AGI refers to an AI model with capabilities comparable to, or even beyond, those of the human brain. Achieving human-level cognitive abilities with an AI model requires substantial investments, as well as hiring the best talent to build such a system. That's why Meta is throwing hundreds of millions of dollars at AI researchers from OpenAI, Apple, and other companies to recruit them for its Superintelligence team. A user on X has now shared a spreadsheet that provides us with some unique insights into Meta's Superintelligence team and the origins of its 44 employees. The leaker claims this information comes from an anonymous Meta employee. The listing claims that 50 percent of the staff at the Superintelligence team are from China, which demonstrates the significant role of Chinese or Chinese-origin researchers in Met's AI efforts. Additionally, 75 percent of these staff hold PhDs, and 70 percent of them work as researchers. Interestingly, 40 percent of the staff are ex-OpenAI employees whom Mark Zuckerberg poached from the maker of ChatGPT. Additionally, 20 percent of Meta's Superintelligence team members come from Google DeepMind, and another 15 percent come from Scale AI, a startup that Meta recently acquired in a $15 billion deal. Another interesting point is that 75 percent of the Superintelligence team are first-generation immigrants. The leaker claims that each of these employees is now earning between $10 million and $100 million per year, although Meta still needs to confirm these substantial figures. However, it has already been reported that Meta is offering up to $100 million in signup bonuses to poach the best AI talent from OpenAI and other rivals. The revelation that half of Meta's Superintelligence team consists of Chinese nationals could trigger concerns within the Trump administration and Congress.
  • Recent Achievements

    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      505
    2. 2
      ATLien_0
      207
    3. 3
      Michael Scrip
      206
    4. 4
      Xenon
      138
    5. 5
      +FloatingFatMan
      112
  • Tell a friend

    Love Neowin? Tell a friend!