Question

大家好，我正在使用悬停元素，我构建了一个#nav栏，最后一个元素内有少量元素（Logout）包含2张图片我尝试在鼠标（悬停）之后更改图片我如何管理它

HTML

   <ul>
      <li><a href="#Stuff1">Stuff1</a></li>
      <li><a href="#Stuff2">Stuff2</a></li>
      <li><a href="#Stuff3">Stuff3</a></li>
      <li><a href="?logout=1">Logout<img id="on" src="img/on.png" alt="button"/><img id ="off" src="img/off.png" alt="button"/></a>
      </li>

CSS

#nav ul img
{
vertical-align: middle;
padding-left: 5px;
}

#nav
{  
max-width: 100%;
border: 2px solid white;
color: green;
background-color: grey;    
border-radius: 10px 10px 10px 10px;
}

#nav_wrapper
{
margin:0 auto;
text-align: center;
}

#nav ul
{
border-radius: 10px 10px 10px 10px;
position: relative; 
list-style-type: none;
margin:0;
padding:0;
}

#nav li 
{

    border-radius: 10px 10px 10px 10px;
    display: inline-block;
}
#nav ul li:hover
{
    background-color: #333;
}

#nav ul li a,visited
{
    color: #ccc;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#off
{
    display: none;
}

Answer 1

尝试这种方式

/* default state */
ul li:last-child img {
   display: block;
}   
ul li:last-child img + img {
   display: none;
}

/* switch images display on :hover */
ul li:last-child:hover img {
   display: none;
}   
ul li:last-child:hover img + img {
   display: block;
}

注意：因为在您的示例中，只有单个列表项上的图像，您可以简化规则，省略ul和:last-child以降低其特异性并使示例正常工作甚至在IE8（该浏览器中为:last-child doesn't work）

CSS悬停：最后一种子显示：无;显示：块;

1 个答案: