0

对于我的导航栏，我有几个按钮。将鼠标悬停在按钮上时，我希望更改背景图像并且希望更改字体颜色。背景图像变化很好，但我无法改变字体颜色。我将两者都包括在内，.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>
4

2 回答 2

3

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

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

于 2012-07-08T22:15:38.687 回答
0

只需将您的重要信息添加到.but1:hover下面的代码中

.but1:hover {
color:#FFF !important;
background:url(images/but11.png) left top no-repeat;
}
于 2012-07-08T22:20:36.837 回答