CSS 类选择器与 :has() 伪类实现基于 hover 的条件显示

利用现代 CSS 的 :has() 伪类，可在不修改 HTML 结构的前提下，通过父容器监听子元素 hover 状态，精准控制对应 overlay 的显示，避免传统相邻兄弟选择器导致的多元素误触发问题。

利用现代 css 的 `:has()` 伪类，可在不修改 html 结构的前提下，通过父容器监听子元素 hover 状态，精准控制对应 overlay 的显示，避免传统相邻兄弟选择器导致的多元素误触发问题。

在构建交互式导航或卡片式布局时，常需实现「悬停某个菜单项 → 显示专属内容层」的效果。但传统 CSS 组合器（如 +、~、>）受限于 DOM 层级关系，难以直接建立 <li> 与远距离 .overlay-* 元素间的条件关联——尤其当 overlay 不是 <li> 的子元素或紧邻兄弟时。过去往往依赖 JavaScript 或重构 HTML（如将 overlay 嵌套进每个 <li>），既增加复杂度，又影响语义与可维护性。

现代解法：:has() 伪类
CSS :has() 是一个革命性的父选择器（Parent Selector），允许根据子元素状态匹配父元素。其语法为 E:has(F)，表示“匹配包含满足 F 条件子元素的 E 元素”。结合 :hover 和 :nth-child()，即可精准定位被悬停的 <li> 并触发对应 overlay：

/* 当 .content 内第一个 li 被悬停时，显示后续的 .overlay-one */
.content:has(li:hover:nth-child(1)) ~ .overlay-one {
  display: block;
  background-color: lime;
}

/* 当 .content 内第二个 li 被悬停时，显示后续的 .overlay-two */
.content:has(li:hover:nth-child(2)) ~ .overlay-two {
  display: block;
  background-color: yellow;
}

/* 隐藏所有 overlay 初始状态 */
.overlay-one,
.overlay-two {
  display: none;
  background-color: red;
  padding: 2rem;
}

✅ 关键优势：

• 零 JS 依赖：纯 CSS 实现，性能更优，SEO 友好；
• 结构自由：overlay 可置于任意位置（如 .content 后续兄弟），无需嵌套或额外 wrapper；
• 精准控制：:nth-child(n) 确保仅响应指定序号的 <li>，彻底解决“悬停一个、全部显示”的问题；
• 语义清晰：HTML 保持语义化分组（导航区 + 内容区），CSS 逻辑直观可读。

⚠️ 注意事项：

• 浏览器兼容性：:has() 已获 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com），旧版需降级方案（如 JavaScript 监听 mouseenter/mouseleave 并切换 class）；
• 性能考量：:has() 在复杂 DOM 中可能触发重排，建议仅用于层级较浅、目标明确的场景；
• 选择器顺序：.content:has(…) 必须位于 .overlay-* 元素之前（因 ~ 是后续兄弟选择器），且 .overlay-* 需为 .content 的同级后续元素（如示例中 <p class=”content”>…</p><p class=”overlay-one”>）；
• 避免歧义：nth-child 基于实际 DOM 位置，若 <li> 间存在其他元素（如注释、文本节点），需改用 :nth-of-type() 或添加唯一 class（如 .myLi）并配合 [class*=”myLi”]:hover。

总结
:has() 彻底改变了 CSS 条件样式的范式——它让“子状态驱动父行为”成为可能。本例中，仅需两行核心 CSS 即可实现多 overlay 的精准响应，大幅简化了交互逻辑。在支持现代浏览器的项目中，应优先采用此方案；对于需兼容旧版的场景，可结合 @supports 进行优雅降级，例如：

立即学习“前端免费学习笔记（深入）”；

@supports selector(:has(*)) {
  .content:has(li:hover:nth-child(1)) ~ .overlay-one { display: block; }
  .content:has(li:hover:nth-child(2)) ~ .overlay-two { display: block; }
}
@supports not selector(:has(*)) {
  /* fallback: 添加 JavaScript 或调整 HTML 结构 */
}

这一模式不仅适用于 overlay 显示，还可扩展至表单验证提示、动态高亮、响应式导航等场景，是现代 CSS 开发者必须掌握的关键能力。