• 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

    • I think it could, but not intelligently, it would just be a matter of switching plans depending on if you want your cores parked. Still, that is probably something most gamers would be happy with. Important to note, that only matters for 3D chips with two CCDs, the 8-core X3D chips only have one CCD, so it doesn't matter. There are really two similar issue here when it comes to these multiple CCD chips. 1, better schedular understanding of what cores are best for what tasks. the probably need to just create a database of apps that will guide the windows scheduler, similar to NVidia's game ready drivers. You really have 3 categories to choose from, apps that should be pinned to 3D cores, apps that should be pinned to the fastest cores (non-3D on only chips, doesn't matter on newer), and apps that benefit from using as many cores as possible even if it means mixing both types. 2, Windows as a concept of NUMA Nodes (non-uniform memory access) for servers with multiple CPUs. It allows the scheduler to choose the best CPU based on what memory addresses are physically connected to that CPU's memory controller and avoid the costly operation of using a different CPU to access memory. I feel like they need a similar concept for NUCA Nodes (non-uniform cache access), so the scheduler understands what areas of cache are directly connected to what cores to prevent the costly operation of a core trying to access L3 cache from a different CCD.
    • Firstly, before responding, learn something, even if it's just a little bit, about computers and software. Secondly, and also before responding, learn to read, because at no point have I written anything about a Windows 11 Mobile.
    • The smart switch itself isn't doing the filtering. It's just a physical toggle for the filter. The idea is you will be less tempted to bypass the filter if you have to physically get up and walk to the other side of the house and press a button. This isn't being used to filter inappropriate content, it's to break an addiction to stupid sites like Facebook, Instagram or.... Neowin. Hahaha
    • raptors are meaningless monsters. I'm not gaming..
    • Firefox 140.0 by Razvan Serea Firefox is a fast, full-featured Web browser. It offers great security, privacy, and protection against viruses, spyware, malware, and it can also easily block pop-up windows. The key features that have made Firefox so popular are the simple and effective UI, browser speed and strong security capabilities. Firefox has complete features for browsing the Internet. It is very reliable and flexible due to its implemented security features, along with customization options. Firefox includes pop-up blocking, tab-browsing, integrated Google search, simplified privacy controls, a streamlined browser window that shows you more of the page than any other browser and a number of additional features that work with you to help you get the most out of your time online. Note: Firefox 140.0 changelog is not yet available. Download: Firefox 64-bit | Firefox 32-bit | ARM64 | ~60.0 MB (Freeware) Download: Firefox 140.0 for Linux | 64-bit | ~90.0 MB Download: Firefox for MacOS | 127.0 MB View: Firefox Home Page | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      fredss earned a badge
      Week One Done
    • Dedicated
      fabioc earned a badge
      Dedicated
    • One Month Later
      GoForma earned a badge
      One Month Later
    • Week One Done
      GoForma earned a badge
      Week One Done
    • Week One Done
      ravenmanNE earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      644
    2. 2
      Michael Scrip
      226
    3. 3
      ATLien_0
      217
    4. 4
      +FloatingFatMan
      144
    5. 5
      Xenon
      137
  • Tell a friend

    Love Neowin? Tell a friend!