• 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

    • Bethesda's Deathloop is free to claim on the Epic Games Store this week by Pulasthi Ariyasinghe The Epic Games Store's Mega Sale promotion is in its final week, and that means mystery giveaways are soon ending too. For the finale, Epic Games has called in something big from Bethesda, with the Arkane-developed time loop adventure Deathloop coming in as the latest freebie for PC gamers. Alongside it, the indie adventure Ogu and the Secret Forest is also free. Developed by Arkane Lyon and published by Bethesda, Deathloop comes in touting an action-packed campaign involving plenty of time travel shenanigans. The game is set on the mysterious island of Blackreef, where two rival assassins, Colt and Julianna, are trapped in a time loop. The player, as Colt, has to figure out how to eliminate eight targets within a single day to escape the loop. Each of the assassinations can be taken care of in many ways, including stealth, traps, accidents, or simply going in guns blazing. Aside from gunplay, the title also makes use of supernatural systems very similar to the studio's Dishonored franchise, letting players teleport, go invisible, use telekinesis, and more. There is a multiplayer twist here too, where players, as Julianna, can invade the campaigns of others to take the role of the rival assassin, flipping the tables on the main character and his plans. As for Ogu and the Secret Forest, this is a 2024-released indie adventure featuring hand-drawn characters and various types of puzzles. The 2D game involves befriending characters across a fantasy land as baby Ogu, with plenty of exploration, puzzle solving, and boss battles available. The Deathloop and Ogu and the Secret Forest giveaways are now live on the Epic Games Store for all PC gamers. The promotion is slated to last until June 12, giving you seven days to claim a copy for your library permanently. While the summer mystery giveaways are ending, regular freebies will continue to arrive from the Epic Games Store. When this one comes to an end on Thursday, the SEGA-published humorous hospital simulation entry Two Point Hospital is incoming as the next giveaway.
    • If graphics is all that matters to you go watch a Pixar movie or something, you sound like an absolute baby right now. The game looks great.
    • For sure!! My take is... If the dev choses to use Apple's payment services, sure, Apple can take a cut. Apple disallowing 3rd party payment processing directly within an app, kind of a gray area, its anti-competitive sure, but I can at least see arguments on both sides. Apple blocking or attempting to take a cut from weblinks is pure evil, there is no possible justification at all. Heck, if we take this to the logical next step, Apple should start demanding a cut of retail transactions if the user used GPS directions on an iPhone to get to the store.
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      407
    2. 2
      +FloatingFatMan
      181
    3. 3
      snowy owl
      176
    4. 4
      ATLien_0
      170
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!