Forums

dynamyc

I have this markup:

<div id="contestbuttons">
             
              <a href="#" ><img id="bt1" src="images/buton1.png"/></a>
              <a href="#"><img  src="images/buton2.png"/></a>
                </div>

and this css markup for the hover :

#contestbuttons img#bt1:hover {background:url('../images/buton1hover.png')no-repeat; width:261px;height:39px;}

And it's not working, same for the 2nd image.
What is wrong?

Tcooper

You are trying to add a background to an img element, that isn't going to work. I'm guessing you want something like:

<div id="contestbuttons">
    <a href="#" class="button1">Button 1</a>
    <a href="#" class="button2">Button 2</a>
</div>

.button1 {
    background: url('/images/buton1.png') no-repeat;
    height: 39px;
    width: 261px;
    text-indent: -9999px;
}

.button1:hover {
    background-image: url('/images/buton1hover.png');
}

You should also look into how sprites work to save you an extra HTTP request on this sort of thing - http://css-tricks.com/css-sprites/

Also, image replacement if you haven't come across the text-indent stuff before - http://css-tricks.com/css-image-replacement/

afferennen

Agreed. CSS sprites will definitely help you in this, because it won't be making two HTTP requests for two images, only one.

Check out SpriteRight on the Mac App Store as well. It might help if you're new at this.

treehouse : what would you like to learn today?

Forums

css image hover