CSS显示属性上的过渡

Z时代
2024-01-10
分类：问答

我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。

目前，，即，您不能进行从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>