マウスオーバーで画像ボタンを変更する方法

Question

ロールオーバー時に画像ボタンを緑色から黄色に変更したいと思います。

は、ここに私のCSSコード

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

私のhtmlコード事前に

<div id="y-moringa"> 


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

</div> 

おかげです。

Answer 1

テストされていないが、これに打撃与える：

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

Answer 2

がa#try-it-buttonにfloat: leftまたはdisplay: inline-blockまたはdisplay: blockを追加します。

あなたが望むレイアウトのどれがあなたが望むレイアウトに本当に依存していますか？

:hoverのすべてのプロパティを複製する必要はありません（新しいbackgroundを除く）。

"CSS Sprites"（多くの利点があります）を使用して、background-positionを:hoverに調整してください。