Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question Hover over not working on my images on the left?!

    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
    Code:
    #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
    Code:
    <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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The selectors should be of the form
    Code:
    #leftcolumn a.myspace:hover { }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your css is wrong. For instance, you have:

    Code:
    <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:

    Code:
    #leftcolumn .facebook a:hover {...}
    There is no such matching element. Your css should be:

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •