Question

I’m trying to create a hover link using css but it’s not working. Is this the correct way to create css hover links? Thanks,

I have read though this but no luck: http://w3schools.com/css/css_link.asp

Here is the code I have:

CSS

.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(../images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a.link {
color:#FFF;
}
.Footerbullets a.hover {
 color:#FF0;
}

HTML

<div id="footer"><div class="content">
       <ul>
          <li class="Footerbullets"><a href="#">Link with Hover Color Change</a></li>
       </ul>
   <div class="clear"></div>
</div></div>

Answer 1

Use div#footer ul li.Footerbullets a:hover instead of .Footerbullets a:hover, it seems that div#footer ul li a:hover is overriding other styles.

http://jsfiddle.net/GFec3/14/