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

对于我的导航栏，我有几个按钮。当鼠标悬停在按钮上时，我希望背景图像改变，字体颜色也改变。背景图像变化很好，但我无法改变字体颜色。我包括了

.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>

选择器

#按钮a

比

更具体。但是1:悬停

，因此优先

将其更改为按钮。但是1:悬停，它将更具体。

选择器按钮a比按钮a更具体。但是1:悬停，因此它将优先

---

将其更改为

#按钮。但是1:悬停

，它将更加具体。

只需将您的重要信息添加到

。但是1:悬停

，如下面的代码所示

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

---

只需将您的重要信息添加到

中即可。但是1:像下面的代码一样悬停

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

---

…或将class.button添加到所有按钮，并在其中放置常用样式。将使您的代码更加可重用和经得起未来考验。@Henrik:如何使代码更加可重用和经得起未来考验？@Guffa:选择“按类”而不是“按id”将使其他按钮实例具有相同的颜色和字体大小成为可能。使用id选择器会更困难，因为每页只能有一个id实例。@Henrik：是的，按类选择会使其更易于重用，但您不认为最好将id更改为类，而不是在每个子元素上设置类吗？不过，我没有得到未来的证明。@Guffa：你说得对，没有更改id，我的意思是在每个按钮（but1、but2等）上添加一个额外的类，并将#buttons a{}选择的样式放在该类上。也许我不清楚未来证明部分，我的意思是，代码将更容易以这种方式维护，因为将来不需要抽象任何东西，例如，如果他/她想在任何其他dom元素中放置与id为“buttons”的元素具有相同样式的按钮..或将class.按钮添加到所有按钮，并在其中放置公共样式。将使您的代码更加可重用和经得起未来考验。@Henrik:如何使代码更加可重用和经得起未来考验？@Guffa:选择“按类”而不是“按id”将使其他按钮实例具有相同的颜色和字体大小成为可能。使用id选择器会更困难，因为每页只能有一个id实例。@Henrik：是的，按类选择会使其更易于重用，但您不认为最好将id更改为类，而不是在每个子元素上设置类吗？不过，我没有得到未来的证明。@Guffa：你说得对，没有更改id，我的意思是在每个按钮（but1、but2等）上添加一个额外的类，并将#buttons a{}选择的样式放在该类上。也许我不清楚未来证明部分，我的意思是，代码将更容易以这种方式维护，因为将来不需要抽象任何东西，例如，如果他/她想在任何其他dom元素中放置与id为“buttons”的元素具有相同样式的按钮。