Html CSS悬停：最后一种子显示类型：无；显示：块；

大家好，我正在用一个悬停元素来摆弄我构建了一个#导航栏，在最后一个元素（注销）中包含了2张图片，我尝试在鼠标悬停（悬停）后更改图片如何管理它

HTML

这样试试

/* 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

）

我更希望在这里使用一个类，以避免将来导航顺序发生变化时出现任何潜在的麻烦。@halabuda很好，但他甚至可以避免使用一个类，只使用

[href^=“？”]img

和

[href^=“？”]img+img

@Fabriziocarderan如果链接发生变化，您仍然会遇到同样的问题。将类添加到列表元素将是持久的。

#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;
}

/* 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;
}