CSS hover:最后一种子显示类型:none;显示:块;

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不工作在该浏览器)