html - CSS 悬停 : last type of child display:none; display:block;

Question

大家好，我正在为悬停元素而苦苦挣扎 我构建了一个#nav 栏，其中最后一个元素(注销)中的元素很少，包含 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 在该浏览器中)