如何更改鼠標懸停上的圖像按鈕

這裏是我的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>

在此先感謝。

來源

2011-08-16 Sam

它以什麼方式不起作用？如果鏈接（'a'）具有可見內容，那麼這應該[已經工作]（http://jsfiddle.net/davidThomas/hR589/）只使用CSS。 –

未經檢驗的，但是這給了一槍：

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

來源

2011-08-16 20:24:04 inkedmn

添加float: left或display: inline-block或display: block到a#try-it-button。

你想要的那一個真的取決於你想要的佈局。

您不需要複製:hover上的所有屬性（新的background除外）。

實際上你應該在這裏做的是使用"CSS Sprites"（有很多好處），並調整background-position:hover。

來源

2011-08-16 20:24:23 thirtydot

如何更改鼠標懸停上的圖像按鈕

回答

相關問題