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

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

2 个答案: