• 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

    • At some point, hardware becomes obsolete and we cant blame vendors for dropping support. Much of the models dropped, run Intel hardware which means they can install something else on the device if they truly want to keep using it.
    • Well, that was fun: PS C:\WINDOWS\system32> Install-Script -Name Set-InetpubFolderAcl WARNING: Unable to download from URI 'https://go.microsoft.com/fwlin...627338&clcid=0x409' to ''. WARNING: Unable to download the list of available providers. Check your internet connection. PackageManagement\Install-PackageProvider : No match was found for the specified search criteria for the provider 'NuGet'. The package provider requires 'PackageManagement' and 'Provider' tags. Please check if the specified package has the tags. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7468 char:21 + ... $null = PackageManagement\Install-PackageProvider -Name $script:N ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidArgument: (Microsoft.Power...PackageProvider:InstallPackageProvider) [Install-PackageProvider], Exception + FullyQualifiedErrorId : NoMatchFoundForProvider,Microsoft.PowerShell.PackageManagement.Cmdlets.InstallPackageProvider PackageManagement\Import-PackageProvider : No match was found for the specified search criteria and provider name 'NuGet'. Try 'Get-PackageProvider -ListAvailable' to see if the provider exists on the system. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7474 char:21 + ... $null = PackageManagement\Import-PackageProvider -Name $script:Nu ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidData: (NuGet:String) [Import-PackageProvider], Exception + FullyQualifiedErrorId : NoMatchFoundForCriteria,Microsoft.PowerShell.PackageManagement.Cmdlets.ImportPackageProvider WARNING: Unable to download from URI 'https://go.microsoft.com/fwlin...627338&clcid=0x409' to ''. WARNING: Unable to download the list of available providers. Check your internet connection. PackageManagement\Get-PackageProvider : Unable to find package provider 'NuGet'. It may not be imported yet. Try 'Get-PackageProvider -ListAvailable'. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7478 char:30 + ... tProvider = PackageManagement\Get-PackageProvider -Name $script:NuGet ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (Microsoft.Power...PackageProvider:GetPackageProvider) [Get-PackageProvider], Exceptio n + FullyQualifiedErrorId : UnknownProviderFromActivatedList,Microsoft.PowerShell.PackageManagement.Cmdlets.GetPackageProvider Install-Script : NuGet provider is required to interact with NuGet-based repositories. Please ensure that '2.8.5.201' or newer version of NuGet provider is installed. At line:1 char:1 + Install-Script -Name Set-InetpubFolderAcl + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidOperation: ( [Install-Script], InvalidOperationException + FullyQualifiedErrorId : CouldNotInstallNuGetProvider,Install-Script
    • Because Apple has never discontinued Mac models before now?
    • I recall reading that they intend to synchronize the version numbers between iOS, tvOS and macOS, so we will also be getting macOS 26 up next.
    • every time.... why can't I install windows 11 on my 8088?
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      490
    2. 2
      +FloatingFatMan
      258
    3. 3
      snowy owl
      249
    4. 4
      ATLien_0
      223
    5. 5
      +Edouard
      190
  • Tell a friend

    Love Neowin? Tell a friend!