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

Question

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>

Answer 1

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

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

Answer 2

simply add your important into .but1:hover like the code below

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