...

View Full Version : Hover over not working on my images on the left?!



jarv
10-21-2010, 02:44 PM
on my site: http://www.thisisjag.co.uk/jag/

I have FACEBOOK, MYSPACE and YOUTUBE logos.

my image swap HOVER change background CSS doesn't work?!

CSS

#leftcolumn .myspace { margin:20px 0; width:200px; height:75px; display:block; background-image:url(images/Myspace_logoBW.jpg); }
#leftcolumn .myspace a:hover { background-image:url(images/Myspace_logoBW.jpg); }
#leftcolumn .facebook { margin:20px 0; width:200px; height:75px; display:block; background-image:url(images/facebookBW.jpg); }
#leftcolumn .facebook a:hover { background-image:url(images/facebook.jpg); }
#leftcolumn .youtube { margin:20px 0; width:200px; height:75px; display:block; background-image:url(images/youtube_logoBW.png); }
#leftcolumn .youtube a:hover { background-image:url(images/youtube_logo.png); }

HTML


<a href="http://www.myspace.com/thisisjag" class="myspace">Myspace</a>
<a href="http://www.myspace.com/thisisjag" class="facebook">facebook</a>
<a href="http://www.myspace.com/thisisjag" class="youtube">YouTube</a>

abduraooft
10-21-2010, 03:19 PM
The selectors should be of the form

#leftcolumn a.myspace:hover { }

SB65
10-21-2010, 03:20 PM
Your css is wrong. For instance, you have:


<a href="http://www.myspace.com/thisisjag" class="facebook">facebook</a>

So the facebook class is on the a element. Then your css for the :hover is currently applying the style to a hover on an anchor element within an element with class facebook:


#leftcolumn .facebook a:hover {...}

There is no such matching element. Your css should be:


#leftcolumn a.facebook:hover {...}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum