html - CSS 如何在悬停时为不透明度 0 的过渡设置动画

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