如何使下拉列表在过渡过程中褪色？

Question

我想让下拉菜单稍微淡出。我试图增加透明度和悬停，但我无法弄清楚。

nav ul li:hover > .midbox {
    opacity:1;
    transition: all 0.5s ease;
}

我将opacity:0设置在.midbox上，并应用相同的转换。下面是一个例子。

https://jsfiddle.net/skf5v0Lw/

我是否应该使用另一个元素悬停状态来影响下拉列表的状态？

Answer 1

CSS转换不适用于display属性。使用visibility代替。另外，它应该设置在下拉UL上，而不是内部元素上。

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    /* display: none; */
    position: absolute; 
    width: 800px;
    top: 60px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    /* display:block; */
    opacity: 1;
    visibility: visible;
}

https://jsfiddle.net/skf5v0Lw/5/

Answer 2

不确定这是否有帮助，但您可以查看dropotron，它允许一系列设置，如淡入下拉，悬停延迟，诸如此类的事情。

https://github.com/n33/jquery.dropotron