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 回答