CSS 类选择器结合 :has() 实现基于列表项悬停的叠加层精准控制

在传统 CSS 中，选择器只能从上到下、从左到右匹配（即父→子、前→后），无法根据后代元素的状态（如 li:hover）反向影响祖先或兄弟元素——这正是本例的核心难点：当用户悬停 <li class=”myLi”>One</li> 时，需仅显示后续兄弟节点中 .overlay-one，而保持 .overlay-two 隐藏；同理，悬停第二个 li 时只激活 .overlay-two。

过去常依赖 JavaScript 或重构 DOM（如将 overlay 嵌入 li 内部），但如今主流浏览器（Chrome 105+、Firefox 111+、Safari 15.4+）已原生支持 :has() 伪类，它允许我们基于子元素状态定义父/兄弟选择器，完美契合此场景。

✅ 正确解法：:has() + 兄弟选择器

关键在于将悬停状态“提升”至共同父容器（.content），再通过 :has() 检测其内部第 N 个 li 是否被悬停，并结合通用兄弟选择器 ~ 定位目标 overlay：

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

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

/* 默认隐藏所有 overlay */
.overlay-one,
.overlay-two {
  display: none;
  background-color: red;
  padding: 2rem;
  position: relative; /* 推荐添加，便于后续 z-index 控制 */
}

? 注意：nth-child(1) 和 nth-child(2) 依赖 <li> 在 DOM 中的实际顺序。本例中前两个 li 均含 class=”col-4 myLi”，且为 <ul> 的直接子元素，因此可精准匹配。若存在其他非 li 子节点，建议改用 :has(> .myLi:first-of-type:hover) 或 :has(> .myLi:nth-of-type(2):hover) 提高鲁棒性。

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

⚠️ 重要注意事项

• 浏览器兼容性：:has() 尚未被 IE 支持，且旧版 Safari 需启用实验性功能。生产环境请务必检查 Can I use :has() 并配置渐进增强方案（例如降级为 JS 监听事件）。
• 性能考量：:has() 是相对昂贵的选择器，避免在深层嵌套或高频重绘区域滥用。本例中仅作用于顶层 .content，影响可控。
• HTML 结构约束：.overlay-one 和 .overlay-two 必须是 .content 的后续兄弟元素（而非子元素），否则 ~ 无法匹配。当前结构完全符合要求。
• 避免误触发：原代码中 p.content:hover + p.overlay-one 会导致整个 .content 区域悬停即激活所有 overlay，而 :has() 方案严格绑定到具体 li，语义更精确。

? 扩展建议：支持更多 overlay

若需扩展至 overlay-three 等，只需延续模式：

.content:has(li.myLi:nth-child(3):hover) ~ .overlay-three {
  display: block;
}

并确保对应 overlay 元素按顺序置于 .content 之后。

✅ 总结

CSS :has() 彻底改变了我们处理“状态驱动兄弟元素”的方式。相比 JavaScript 方案，它零运行时开销、天然响应式、样式逻辑集中。只要目标浏览器支持，这便是最简洁、最符合 CSS 设计哲学的解决方案——无需操作 DOM，仅靠纯 CSS 即可实现精准、可维护的交互效果。