0

ナビゲーションバーには、いくつかのボタンがあります。ボタンにカーソルを合わせると、背景画像を変更したり、フォントの色を変更したりします。背景画像は正常に変化していますが、フォントの色を変更できません。両方を含めて、.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>
4

2 に答える 2

3

セレクター#buttons aはより具体的で.but1:hoverあるため、優先されます。

に変更すると#buttons .but1:hover、より具体的になります。

于 2012-07-08T22:15:38.687 に答える
0

.but1:hover以下のコードのように重要なものを追加するだけです

.but1:hover {
color:#FFF !important;
background:url(images/but11.png) left top no-repeat;
}
于 2012-07-08T22:20:36.837 に答える