如何通过 CSS :has() 选择器实现悬停 span 时显示相邻 div-html教程-PHP中文网

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

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

本文介绍如何利用现代 css 的 `:has()` 伪类选择器，精准触发「当 `` 被悬停时显示其后兄弟元素 `

`」的交互效果，解决传统相邻兄弟选择器（`+`）无法跨层级匹配的限制。

在实际开发中，我们常需实现“悬停某内联元素（如）时，控制外部块级容器（如

）显隐”的交互。但 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：

CSS婚礼策划服务机构宣传网站模板

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，即可构建清晰、可维护的样式驱动交互。