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.