Question

我已经制作了一个响应式菜单，其中第四个列表项目元素在移动设备上获得display:none; opacity:0。第四个元素是另一个列表项，它是一个图标。将鼠标悬停在图标上时，隐藏的菜单项将使用

显示为下面的阻止列表

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

无论我在CSS中坚持transition: all 0.5s ease，我都无法进行过渡。我是否正在努力做一些刚刚工作的事情，因为我在兄弟选择器上行事，或者我做错了什么？

请参阅小提琴：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:媒体资源。无论是看到还是隐藏。中间没有＆＃34;＆＃34;过渡到/来自的变化。

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

＆＃13;

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

＆＃13;

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

＆＃13;

将鼠标悬停在元素

1 个答案: