Question

我想让下拉菜单略微淡入/淡出。我试图添加不透明度和悬停，但我无法弄明白。

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

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

https://jsfiddle.net/skf5v0Lw/

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

Answer 1

不确定这是否有帮助，但你可以查看dropotron，它允许一系列设置，如淡入淡出，悬停延迟等等。

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

Answer 2

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/

如何使下拉淡入淡出过渡？

2 个答案: