将鼠标悬停在按钮上时更改字体颜色和背景图片 [英] Changing font color and background image when hovering over button

问题描述

对于我的导航栏，我有几个按钮。当悬停在按钮上时，我想要更改背景图像，我想要更改字体颜色。背景图像变化很好，但我不能得到字体颜色更改。我包括 .but1 和 .but2 来了解每个按钮的外观，对于悬停文本，只有编辑 .but1 。

For my navigation bar, I have several buttons. When hovering over a button, I want the background image to change and I want the font color to change. The background image is changing fine but I can't get the font color to change. I included both .but1 and .but2 to give an idea of what each of the buttons look like but so far I've only edited .but1 for the hover text.

任何帮助将不胜感激。感谢！

Any help would be appreciated. Thanks!

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>

推荐答案

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

The selector #buttons a is more specific than .but1:hover, so it will take precedence.

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

Change it to #buttons .but1:hover and it will be more specific.

这篇关于将鼠标悬停在按钮上时更改字体颜色和背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！