如何用CSS :has()选择器快速实现悬停span显示相邻div

本文介绍如何借助现代 CSS 的 :has() 伪类选择器，精准实现「当 被鼠标悬停时，显示其后续兄弟元素

」的交互效果，有效弥补传统相邻兄弟选择器（+）无法跨层级匹配的短板。

实际开发中，我们经常遇到这样的需求：当鼠标悬停在一个内联元素（例如 ）上时，需要控制另一个块级容器（如

）的显示或隐藏。看似简单，但利用传统 CSS 实现却颇为棘手——CSS 原本不支持父选择器，也无法进行「向上查找」这种逆向 DOM 定位。因此，像下面这样的写法是无效的：

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

问题在于：.baz 是 .bar 的子元素，而 .qux 是 .bar 的同级后续兄弟元素——两者并非直接相邻的 DOM 节点。CSS 的相邻兄弟选择器（+）仅适用于紧邻的下一个兄弟元素，无法跨越层级进行选择。

那么是否存在绕过这一限制的方法？答案是肯定的，这就要引入我们的主角——:has() 伪类（出自 CSS Selectors Level 4）。它能够根据子元素的状态，反向影响父元素或同级元素，恰好弥补了传统选择器的不足。针对本文的 DOM 结构：

  
    Lorem ipsum dolor sit amet.  
  
    
I'm hidden until you hover over baz!
  

正确的 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+ 均已稳定支持；对于旧版浏览器，仍需借助 JavaScript 事件监听作为降级方案。
• 性能考量：应避免在 :has() 中使用过于复杂的嵌套选择器，以免降低渲染性能。
• 隐藏方式的选择：若需将 .qux 完全隐藏（不仅透明），可配合使用 visibility: hidden/visible 或 display: none/block，但 display 属性不支持过渡动画。推荐组合 visibility 与 opacity，既保持动画流畅，又不影响交互操作。

总而言之，:has() 为 CSS 赋予了前所未有的「条件反向定位」能力。这个示例不仅完美解决了悬停时显示元素的问题，更展示了现代 CSS 向逻辑化、声明式交互演进的趋势——在许多场景下，无需 JavaScript 就能构建一套清晰、可维护的样式驱动交互方案。