我目前正在设计一个 CSS“大型下拉”菜单 - 基本上是一个常规的纯 CSS 下拉菜单,但包含不同类型的内容。
目前,似乎 CSS 3 转换不适用于“显示”属性,也就是说,您不能从 display: none< 进行任何类型的转换
到 display: block
(或任何组合)。
当有人将鼠标悬停在顶级菜单项之一上时,是否有一种方法可以让上述示例中的二级菜单“淡入”?
我知道您可以在 visibility:
属性上使用转换,但我想不出一种有效使用它的方法。
我也试过使用高度,但失败得很惨。
我也知道使用 JavaScript 实现这一点很简单,但我想挑战自己只使用 CSS,我认为我做的有点短。
最佳答案
您可以连接两个或更多过渡,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;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
(不要忘记 transition
属性的供应商前缀。)
更多详细信息在 this article 中.
关于css - CSS 显示属性的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55870807/