将鼠标悬停在按钮上时更改字体颜色和背景图像

Question

对于我的导航栏，我有几个按钮。 将鼠标悬停在按钮上时，我想更改背景图像，并且要更改字体颜色。 背景图像变化很好，但我无法更改字体颜色。 我同时包含了.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>

Answer 1

选择器#buttons a比.but1:hover更具体，因此它将具有优先权。

将其更改为#buttons .but1:hover ，它将更加具体。

Answer 2

只需将您的重要内容添加到.but1:hover就像下面的代码一样

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