关于 html：鼠标悬停在按钮上时更改字体颜色和背景图片

Changing font color and background image when hovering over button

对于我的导航栏，我有几个按钮。将鼠标悬停在按钮上时，我希望更改背景图像并更改字体颜色。背景图像变化良好，但我无法更改字体颜色。我同时包含 .but1 和 .but2 以了解每个按钮的外观，但到目前为止我只为悬停文本编辑了 .but1。

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#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

1
2
3
4
5

Home
Projects
Paintings
About
Contact

选择器#buttons a比.but1:hover更具体，所以它会优先。

把它改成#buttons .but1:hover会更具体。