當鼠標懸停在按鈕上時更改字體顏色和背景圖像

對於我的導航欄，我有幾個按鈕。當將鼠標懸停在按鈕上時，我想要更改背景圖像，並且希望字體顏色發生更改。背景圖像正在改變，但我無法改變字體顏色。我包括.but1和.but2兩個，以瞭解每個按鈕的外觀，但到目前爲止，我只編輯了.but1懸停文本。當鼠標懸停在按鈕上時更改字體顏色和背景圖像

任何幫助，將不勝感激。謝謝！

CSS：

#buttons { 
width:665px; 
background:url(images/bg_but.jpg) left top no-repeat; 
text-align:center; 
height:46px; 
margin-left:450px; 
} 

#buttons a { 
font-family:OVerlock, cursive; 
font-size:20px; 
display:block; 
float:left; 
height:34px; 
text-decoration:none; 
color:#303030; 
padding-top:12px; 
padding-left:0; 
text-align:center; 
} 

.but1 { 
background:url(images/but1-4.png) left top no-repeat; 
width:134px; 
} 

.but1:hover { 
color:#FFF; 
background:url(images/but11.png) left top no-repeat; 
} 

.but2 { 
background:url(images/but2.png) left top no-repeat; 
width:132px; 
} 

.but2:hover { 
background:url(images/but22.png) left top no-repeat; 
}

HTML

<div id="buttons"> 
    <a href="#" class="but1" title="">Home</a> 
    <a href="#" class="but2" title="">Projects</a> 
    <a href="#" class="but3" title="">Paintings</a> 
    <a href="#" class="but4" title="">About</a> 
    <a href="#" class="but5" title="">Contact</a> 
</div>

來源

2012-07-08 useruser5000

的選擇#buttons a比.but1:hover更具體的，所以它會優先考慮。

將其更改爲#buttons .but1:hover並且它將更具體。

來源

2012-07-08 22:15:38 Guffa

...或添加類.button所有按鈕以及和地方共同styrning那裏。將使您的代碼更具可重用性和前瞻性。 – 2012-07-08 22:19:13

謝謝你Guffa。 – useruser5000 2012-07-08 22:27:17

@Henrik：它將如何更加可重用和未來的證明？ – Guffa 2012-07-08 22:52:11

只需添加您的重要成.but1:hover像下面的代碼

.but1:hover { 
color:#FFF !important; 
background:url(images/but11.png) left top no-repeat; 
}

來源

2012-07-08 22:20:36

當鼠標懸停在按鈕上時更改字體顏色和背景圖像

回答

相關問題