Computer Science Canada

CSS Hover
Author:  Justin_ [ Thu Jul 27, 2006 12:32 pm ]
Post subject:  CSS Hover
I just can't figure it out...

CSS:
css:

a#button1 {
    display: block;
    width: 70px;
    height: 37px;
    background-image: url(/buttons/img0.jpg);
    margin: 0 auto;
}
a#button1:hover {
    background-image: url(/buttons/img1.jpg);
}
a .alt { display: none; }


XHTML:
HTML:

<a id="button1" href="#"><span class="alt">Push!</span></a>


When I use this code my images dont display. The paths are correctly specified because I can view both images using the <img> element. The goal is to get my buttons to push down when you hover over them but this just doesn't seem to be working, any ideas why?
Author:  Justin_ [ Thu Jul 27, 2006 12:34 pm ]
Post subject: 
Note this was directly copied from this site: http://www.edginet.org/techie/website/cssimg.html#

I have gotten this to work before but for some reason I couldn't get it to work so i figured maybe a syntax error and sure enough even with this code i get nothing...
Author:  rdrake [ Thu Jul 27, 2006 3:12 pm ]
Post subject: 
Just a little nitpick I have... perhaps try quoting the path inside the url();? Not sure what browser you're using, but IE doesn't support anything besides the a tag for :hover. For that you'll need to resort to javascript.
code:
<a href="blah" style="background-image: url('/img/blah.png');" onmouseover="this.className='over_class'" onmouseout="this.className='out_class'">link</a>
That's an alternate way of trying it anyways.
Author:  Amailer [ Thu Jul 27, 2006 4:17 pm ]
Post subject: 
One way to do this is:
HTML:
<div class="button"><a href="index.html"><span style="display: block;">&nbsp;</span></a></div>


css:
.button a {
    display: block;
    width: 70px;
    height: 37px;
    background-image: url(/buttons/img0.jpg);
    margin: 0 auto;
}

.button a:hover {
   background-image: url(/buttons/img1.jpg);
}


See if that works, its almost the same thing as what you posted.
Works on Firefox, Opera, IE 6 (not sure if it works on 7), Safari, Firefox Mac, Camino or w/e

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy