如何通过 CSS :has() 选择器在悬停 span 时显示相邻 div

本文介绍如何利用现代 CSS 的 :has() 伪类选择器，精准触发「当 <span> 被悬停时显示其后兄弟元素 <div>」的交互效果，解决传统相邻兄弟选择器（+）无法跨层级匹配的限制。

本文介绍如何利用现代 css 的 `:has()` 伪类选择器，精准触发「当 `` 被悬停时显示其后兄弟元素 ``」的交互效果，解决传统相邻兄弟选择器（`+`）无法跨层级匹配的限制。

在实际开发中，我们常需实现“悬停某内联元素（如 <span>）时，控制外部块级容器（如 <div>）显隐”的交互。但 CSS 原生不支持父选择器或跨层级向上查找，因此如下写法无效：

.foo .baz:hover + .qux { /* ❌ 错误：.baz 和 .qux 不是相邻兄弟，中间隔着 .bar 和闭合标签 */  opacity: 1;}

原因在于：.baz 是 .bar 的子元素，而 .qux 是 .bar 的同级后续兄弟元素，二者无直接 DOM 相邻关系，+ 选择器仅作用于紧邻的下一个兄弟节点，无法跨越层级跳转。

✅ 正确解法是使用 :has() 伪类（CSS Selectors Level 4），它允许基于子元素状态反向影响祖先或同级元素。针对本例结构：

<div class="foo">  <p class="bar">    Lorem ipsum dolor sit <span class="baz">amet.</span>  </p>  <div class="qux">    <p>I'm hidden until you hover over baz!</p>  </div></div>

应编写如下 CSS：

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

.qux {  opacity: 0;  transition: opacity 0.3s ease;  pointer-events: none; /* 可选：避免鼠标穿透影响悬停连续性 */}.bar:has(> .baz:hover) + .qux {  opacity: 1;  pointer-events: auto;}

? 关键说明：

• .bar:has(> .baz:hover) 表示：当 .bar 内存在一个直接子元素 .baz 处于 :hover 状态时，该 .bar 元素即被匹配；
• + .qux 随后选择 .bar 的紧邻下一个兄弟元素 .qux，完美对应 DOM 结构；
• > .baz:hover 中的 > 确保精确匹配直接子元素，避免意外触发嵌套更深层的 .baz。

⚠️ 注意事项：

• :has() 目前在 Chrome 105+、Edge 105+、Firefox 121+（默认启用）、Safari 15.4+ 中已稳定支持；旧版浏览器需降级处理（如 JS 监听事件）；
• 不建议在 :has() 中使用过于复杂的嵌套选择器，以免影响性能；
• 若 .qux 需完全隐藏（而非仅透明），可配合 visibility: hidden / visible 或 display: none / block（注意：display 无法过渡，推荐 visibility + opacity 组合）。

总结：:has() 为 CSS 带来了前所未有的“条件反向定位”能力。本例不仅解决了悬停显示问题，更体现了现代 CSS 向逻辑化、声明式交互演进的重要一步——无需 JavaScript，即可构建清晰、可维护的样式驱动交互。