Question

我正在尝试更改按钮的图像，当它处于悬停状态并且处于活动状态时，目前它会显示按钮，但是当你将鼠标悬停在它上面时它没有改变，我试过给按钮那里有自己的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;
   }

Answer 1

你必须清理你的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{...}

Answer 2

尝试

#home:hover

或者

#navmain #home:hover

或者

a#home:hover

Answer 3

这个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的结束括号，但如果您这样做会导致另一个问题。

CSS Hover和Active的问题

3 个答案: