how to change Image button on mouseover

Question

I want to change the image button from green to yellow on rollover.

Here is my CSS code

 a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
        width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-orange.png);
}
a.alt { display: none; }

My html code

<div id="y-moringa">


<a id="try-it-button" href="#"><span class="alt"></span></a>

</div>

Thanks in advance.

In what way does it not work? If the link (`a`) has visible content, then this should [work already](http://jsfiddle.net/davidThomas/hR589/) using just CSS. — David Thomas, Aug 16 '11 at 20:22

score 2 · Answer 1 · answered Aug 16 '11 at 20:24

Add float: left or display: inline-block or display: block to a#try-it-button.

Which one of those you want really depends on the layout you desire.

You don't need to duplicate all the properties on :hover (except for the new background).

What you should actually be doing here is using "CSS Sprites" (there are many benefits), and adjusting the background-position on :hover.

score 0 · Answer 2 · answered Aug 16 '11 at 20:24

Untested, but give this a shot:

a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    display:block; // <-- **I added this**
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
    background:url(../image/try-it-orange.png);
}

how to change Image button on mouseover

2 Answers2