纯CSS下拉巨型菜单：仅首次悬停加延迟，切换无延迟（无需JS）

我有一个纯CSS实现的下拉巨型菜单，需要实现以下效果：

• 首次悬停菜单标签时，下拉面板显示有300ms延迟
• 在菜单标签之间切换时（鼠标未离开菜单区域），取消显示延迟
• 全程不使用JavaScript

之前尝试用兄弟选择器给悬停元素的相邻元素设置0过渡延迟，但没用——因为过渡延迟规则是应用在进入悬停状态，而非离开悬停状态。

现有代码 #

CSS代码 #

body * {
  outline: 1px solid black;
  background-color: #0001;
}

ul {
  margin: 0;
  padding: 10px;
  display: inline-flex;
}

li {
  display: inline-block;
  padding: 10px;
}

ul li div {
  position: absolute;
  background-color: white;
  width: 200px;
  height: 200px;
  visibility: hidden;
  transition: visibility 0s;
  transition-delay: 300ms;
}

ul li:hover button {
  background-color: blue;
  color: white;
}

ul li:hover div {
  visibility: visible;
}

ul li:not(:hover) div {
  transition-delay: 0s;
}

a {
  padding: 10px;
  display: block;
}

a:hover {
  text-decoration: none;
}

HTML代码 #

<ul>
  <li>
    <button>Link</button>
    <div>Sheet</div>
  </li>
  <li>
    <button>Link</button>
    <div>Sheet</div>
  </li>
</ul>
<a href='#'>Background link</a>

可行的纯CSS解决方案 #

这个需求可以通过父容器的:hover状态全局控制延迟来实现，核心思路：

• 当鼠标未进入菜单区域（ul:not(:hover)），所有下拉面板的显示延迟设为300ms
• 当鼠标进入菜单区域（ul:hover），所有下拉面板的显示延迟设为0，切换标签时无延迟

优化后的完整代码 #

CSS代码

body * {
  outline: 1px solid black;
  background-color: #0001;
}

ul {
  margin: 0;
  padding: 10px;
  display: inline-flex;
}

li {
  display: inline-block;
  padding: 10px;
}

ul li div {
  position: absolute;
  background-color: white;
  width: 200px;
  height: 200px;
  visibility: hidden;
  transition: visibility 0s;
}

/* 初始状态：未进入菜单区域时，显示延迟300ms */
ul:not(:hover) li div {
  transition-delay: 300ms;
}

/* 进入菜单区域后，取消显示延迟 */
ul:hover li div {
  transition-delay: 0s;
}

ul li:hover button {
  background-color: blue;
  color: white;
}

ul li:hover div {
  visibility: visible;
}

/* 离开单个标签时，下拉面板立即隐藏 */
ul li:not(:hover) div {
  transition-delay: 0s;
}

a {
  padding: 10px;
  display: block;
}

a:hover {
  text-decoration: none;
}

HTML代码（无需修改）

<ul>
  <li>
    <button>Link</button>
    <div>Sheet</div>
  </li>
  <li>
    <button>Link</button>
    <div>Sheet</div>
  </li>
</ul>
<a href='#'>Background link</a>

说明 #

• 该方案完全依靠CSS状态选择器实现，不需要JavaScript
• 如果需求是「只要悬停过一次菜单，之后永久取消延迟」，纯CSS无法实现——因为CSS没有持久化状态的能力，这种场景必须用JavaScript记录状态

内容的提问来源于stack exchange，提问作者Ddefin Orsstt