将鼠标悬停在元素

时间:2016-08-18 22:31:39

标签: css css-selectors css-transitions opacity siblings

我已经制作了一个响应式菜单,其中第四个列表项目元素在移动设备上获得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;
}`

1 个答案:

答案 0 :(得分:0)

您可以转换display:媒体资源。无论是看到还是隐藏。中间没有""过渡到/来自的变化。

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