我目前正在设计一个CSS的“超级下拉菜单” - 基本上是一个常规的纯CSS下拉菜单，但其中包含不同类型的内容。
目前，似乎CSS 3的过渡效果不适用于“display”属性，也就是说，无法从display: none过渡到display: block（或任何组合）。
在上面的示例中，有没有办法使第二级菜单在有人悬停在顶级菜单项上时“淡入”？
我知道可以在visibility:属性上使用过渡效果，但我无法想出有效使用的方法。
我还尝试使用高度，但结果非常糟糕。
我也知道使用JavaScript可以轻松实现这一点，但我想挑战自己只使用CSS，但我觉得我有点力不从心。
您需要通过其他方式隐藏元素以使其正常工作。
我通过将两个都设置为绝对定位，并将隐藏的一个设置为- 将
- 将
- 将元素定位到具有
点赞+0
添加回复
P粉608647033
opacity: 0来实现效果。如果您将
display属性从none切换到block，则其他元素的过渡效果将不会发生。为了解决这个问题，始终允许元素为
display: block，但通过以下任何方式隐藏元素：height设置为0。opacity设置为0。overflow: hidden的另一个元素的框架之外。可能还有更多解决方案，但如果将元素切换为
display: none，则无法执行过渡。例如，您可能尝试类似于以下内容的操作：div { display: none; transition: opacity 1s ease-out; opacity: 0; } div.active { opacity: 1; display: block; }但这将不会起作用。根据我的经验，我发现这样做没有任何效果。
因此，您始终需要保持元素的
display: block- 但您可以通过以下方式绕过此问题：div { transition: opacity 1s ease-out; opacity: 0; height: 0; overflow: hidden; } div.active { opacity: 1; height: auto; }您可以连接两个或更多的过渡效果，而
visibility此时会很方便。div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; }