Question

我希望在将子菜单列表悬停在父元素上时显示转换效果。

这是html中的列表：

<ul id="main">
<li>a
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</li>

理想情况下，不透明度会产生过渡效果：0到不透明度：0.9，但我仍然没有设法这样做。

#main li ul {
   position: absolute;
   display: none;
   visibility: hidden;
   opacity: 0;
   transition: opacity 1s ease-in-out;  
}
#main li:hover > ul {
   display: block;
   visibility: visible;
   opacity: 0.9;
}

JSfiddle链接，还有我的css片段列表。 http://jsfiddle.net/r66yyhhv/5/

Answer 1

删除显示和可见性属性。

（jsFiddle）

#main li ul {
   opacity: 0;
   transition: opacity 1s ease-in-out;  
}
#main li:hover > ul {
   opacity: 0.9;
}

Answer 2

您需要删除显示属性，但保留可见性属性。否则，子列表仍将触发悬停。

这是一个更模块化的代码和一个很好的下滑效果的例子。

http://jsfiddle.net/eq772a1v/

.with-dropdown-list {
  position: relative;
}

.with-dropdown-list ul {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.with-dropdown-list:hover ul {
  visibility: visible;
  opacity: .9;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

CSS如何在悬停时为不透明度0的转换设置动画

2 个答案: