将鼠标悬停在元素上时，CSS不透明度过渡不适用于兄弟选择器

Question

我制作了一个响应式菜单，其中第 4 个之后的列表项元素在移动设备上获得 display:none; opacity:0。第 4 个元素是另一个列表项，它是一个图标。当您将鼠标悬停在图标上时，隐藏的菜单项会显示为下方的阻止列表，使用

li:nth-child(4):hover ~ li { display:block; opacity:1; }

无论我将 transition: all 0.5s ease 放在 CSS 的哪个位置，我都无法进行过渡。我是在尝试做一些不起作用的事情，因为我正在对兄弟选择器进行操作，还是我做错了什么？

参见小提琴：https://jsfiddle.net/nicoleamurray/zap1L8hq/，它显示了移动版本。

更新：与height 配合得非常好！

`.mainmenu{
float: right;
text-align: right;
}
.mainmenu li{
display:inline-block;
}
.mainmenu li:nth-child(4):hover ~ li{
opacity:1;
transition-delay: 0s;
height: 20px;
}
.mainmenu li:nth-child(n+5){
opacity:0;
overflow: hidden;
height: 0;
display: block;
transition: all 0.5s 1s;
}`

Answer 1

您可以不转换display: 属性。它要么被看到，要么被隐藏。没有“中间”变化可以过渡到/从。

如果两个状态都设置为display: block;，则转换功能。 inline-block 也有效.. 但可能意味着需要进行其他一些布局改进。对于下面的sn-p，我只是使用了block;

body { margin: 50px;}

.mainmenu{
    float: right;
    text-align: right;
}
.mainmenu li{
    display:inline-block;
}
.mainmenu li:nth-child(4):hover ~ li{
  display:block;
  opacity:1;
}

.mainmenu li:nth-child(n+5){
  display:block;
  opacity:0;
  transition: all 0.5s ease;
}

 <ul class="mainmenu" role="menubar">
   <li><a href="#">Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="#">Pages</a></li>
   <li class="mainmenu__icon">:</li>
   <li><a href="#">Events</a></li>
   <li><a href="#">Shortcodes</a></li>
   <li><a href="#">Demo</a></li>
</ul>