1

ホバーしてアクティブなときにボタンの画像を変更しようとしていますが、現在はボタンが表示されますが、ホバーしても変更されません。ボタンに独自のIDと同様に与えてみました現在の画像を別の画像に置き換えるだけですが、機能しません。

html: 

 <div id="navcontainer" class="column five">
        <ul id="navmain">
            <li><a href="index.html" id="home">Home</a></li>
            <li><a href="philosophy.html" id="btnphil">Philosophy</a></li>
            <li><a href="econews.html" id="btnnews">Eco News</a></li>
            <li><a href="diy.html" id="btndiy">DIY</a></li>
            <li><a href="takeaction.html" id="btntake">Take Action </a></li>        </ul>
    </div><!-- .sidebar#sideLeft -->

CSS:

#navcontainer{
padding:10px 30px; 
width:220px;
float: left;
margin-top:480px;
}


#navmain li{
list-style:none;
}
#navmain li, #navmain a{
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/button.png') ;
   background-position: center;
   text-align: center;
   color:#000;
   margin-left:-10px;
   margin-top:20px;
  vertical-align: -22%;



#navmain, #home a:hover {
    text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/buttonhover.png') ;
   background-position: center;
   text-align: center;
   color:#000;
   margin-left:-10px;
   margin-top:20px;;}
}

#navmain a:active {
   border-top-color: #297ab0;
   background: #297ab0;
   }
4

3 に答える 3

3

CSS セレクターをクリーンアップする必要があります。あなたは一貫していません：

// This is applying the image
#navmain li, #navmain a{...}

// This is swapping but it starts with "#home" instead of "#navmain"
#navmain, #home a:hover {...}

だから試してください：

#navmain a:hover{...}
于 2013-09-28T21:18:03.393 に答える
0

試す

#home:hover

または

#navmain #home:hover

または

a#home:hover
于 2013-09-28T21:15:26.287 に答える
0

この CSS は間違っています:

#navmain, #home a:hover {
    text-decoration:none;
    height:38px;
    width:153px;
    background-image: url('../images/buttonhover.png') ;
    background-position: center;
    text-align: center;
    color:#000;
    margin-left:-10px;
    margin-top:20px;
}

要素はに対して設定する必要があります#navmain a:hover, #home a:hover

また、コピーペーストの問題かどうかはわかりませんが、 の閉じ括弧がありませんが、#navmain li, #navmain aそうである場合は別の問題が発生します。

于 2013-09-28T21:17:43.270 に答える