• 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

    • Wouldn’t it be better to disable global c states to improve latency at the cost of marginally higher heat and power usage?
    • I recently bought a brand new Intel 200 series laptop with 16GB, 512GB NVME (now 2TB) with 14 inch OLED screen for $450. Not the fastest laptop in the world, but the screen is great and laptop is small, just what I needed.
    • They forgot to include this slide: "If I get a Mac I won't be able to play games, therefore I will have more time for my studies."
    • It’s not desperation, it’s marketing. Companies do that…
    • Some AMD Ryzen users can get free Windows performance boost with this simple system tweak by Sayan Sen AMD understands that there is a lot of demand for its X3D processors and for good reason too, since they offer some of the best gaming experiences. As such, the company plans to launch a new 6-core Ryzen 5 9600X3D for those who may not want to spend top dollar on a 9800X3D. What makes X3D special is the densely packed last level cache (LLC) wherein the L3 (level 3) cache is 3D die-stacked such that there is a whole lot of it that the cores can access on demand all within the smallest footprint. This is said to help with latency especially, and games happen to be quite sensitive to it since they are a mixed workload and so there is a lot of to-and-fro. However, despite that fact, users have noticed micro-stuttering and freezes on Ryzen X3D CPUs. Although there is no official fix, some of the affected users have managed to resolve the issues by tweaking a motherboard setting. The tweak is related to a setting called "GLOBAL C-STATE CONTROL" (it may be called something else by your motherboard vendor) and changing it to 'Enabled' from 'Auto' could fix stuttering and lag-related issues in games. If you are not familiar with them, Processor Power Management is done through Advanced Configuration and Power Interface (ACPI) P-states or C-states. While P-states or performance states handle CPU voltage-frequency scaling, C-states deal with CPU sleep states so that some of the CPU functions, which are not necessary at that moment, are disabled. The P-states and C-states work together to make the processor run more efficiently. It helps the OS and apps determine which cores can be parked. The Global C-state control setting helps users manage not only the DF and CPU core C-states but also the I/O C-states too. For those wondering, DF here refers to Data Fabric or AMD's high bandwidth Infinity Fabric interconnect between CPUs, GPUs, and more, on AMD systems. By default, this is set to "Auto" which also means that it is "Enabled" by default. However, in the case of X3D parts, Auto may set this setting to "Disabled" and thus manually toggling it to "Enabled" may be necessary. X3D processors, the dual CCD (core complex die) ones especially, have their V-cache on a single CCD. If the CPPC (Collaborative Processor Performance Control), which lets an OS like Windows control the "preferred core" and clock speed boost, isn't working optimally to assign the correct gaming CCD, then this fix could well work. Global C-State Auto: Global C-State Enabled: We ran a benchmark on our Ryzen 9 9950X3D to see if toggling the settings would make a difference, and well, it didn't in the case of AIDA64. However, since this is a synthetic test that measures cache and memory exclusively, we can't definitively conclude that the fix will also not make a difference in the case of games. Another remedy for stuttering is to disable the monitoring of the "Power percent" metric on MSI Afterburner if you have it on. This has been a long-known issue and in fact can help you even if you are not using an X3D CPU. Source: Reddit (link1, link2) via YouTube
  • Recent Achievements

    • One Month Later
      DecaffKnight94 earned a badge
      One Month Later
    • Dedicated
      S.P earned a badge
      Dedicated
    • One Month Later
      adxnksd42031 earned a badge
      One Month Later
    • Rising Star
      aphanic went up a rank
      Rising Star
    • Contributor
      GravityDead went up a rank
      Contributor
  • Popular Contributors

    1. 1
      +primortal
      663
    2. 2
      ATLien_0
      260
    3. 3
      Michael Scrip
      234
    4. 4
      Steven P.
      157
    5. 5
      +FloatingFatMan
      151
  • Tell a friend

    Love Neowin? Tell a friend!