how to change Image button on mouseover

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.

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.

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);
}