CODEWITHSUNDEEP
css
Frank G.
Frank G.

Reputation: 1579

CSS Hover and Link

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>

Upvotes: 0

Views: 236

Answers (3)

Hkachhia
Hkachhia

Reputation: 4539

Try this

.Footerbullets a:hover {
 color:#FF0 !important;
}

My code

<style>
.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;
}
</style>

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>

Upvotes: 0

woutr_be
woutr_be

Reputation: 9722

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/

Upvotes: 1

Kyle Lacy
Kyle Lacy

Reputation: 2278

I made a jsfiddle with a working example for each anchor pseudo-class. I tested it and it works in the latest version of Safari at least. You can find it here:

http://jsfiddle.net/kylewlacy/DqePq/

You can read about each pseudo-class and what they do here, as well

Upvotes: 0

Related Questions