Jump to content

CSS - Hover Over 1 List Item


philipsmith
 Share

Recommended Posts

Hello, I am very new to CSS and HTML and have been learning since last week, so i hope someone can help me. I have a list, please see the HTML below, I want to make the list item 'Sparkling', sparkle when hovered over. I thought the CSS code below might make it sparkle, but that makes the entire list sparkle on hover - can anyone help me please?! Thank you! HTML<div class="container_12 clearfix"> <div id="header" class="grid_12"> <h1>Lacosta Wines</h1> <div id"nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="">Red</a></li> <li><a href="">White</a></li> <li><a id="sparkle" href="">Sparking</a></li> <li><a href="">Fine Wines</a></li> <li><a href="">Wine Tastings</a></li> </ul> </div> </div> CSSa:hover, #sparkle {background-image:url('http://www.addglitter.com/link-sparkle.gif');}

Link to comment
Share on other sites

You are actually using two selectors separated by a comma. The first selector targets ALL <a> elements in a hover state; the second targets the #sparkle element, but not in a hover state. Combine them like this: #sparkle:hover

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...