Question

I need to put an image link on my webpage, when they hover over the image I want it to change to another image. I am having trouble doing this.

I this line in my html:

<a href="mailto:[e-mail]?subject=test" id="somethingtosay-ballon" class="item"> hello</a> 

my css classes are:

#somethingtosay-ballon
{   
    background-image: url(Images/button_email_upstate.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;


}
#somethingtosay-ballon .item:hover
{   
    background-image: url(Images/button_email_mouseover.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;

}

Can Anyone tell me the proper way to do this?

Answer 1

Remove the space between #somethingtosay-ballon and .item:hover. It should be:

#somethingtosay-ballon.item:hover