当前位置：首页 > 文章列表 > 文章 > 前端 > 悬停显示子菜单的 CSS 实现方法

悬停显示子菜单的 CSS 实现方法

2026-05-29 17:55:13 0浏览收藏

本文深入讲解了如何利用现代 CSS 的 `:has()` 伪类优雅实现“悬停父项显示同级子菜单”这一长期困扰前端开发者的布局难题——当子菜单与触发项在 DOM 中为平级而非嵌套关系时，传统选择器束手无策，而 `:has()` 以声明式、纯 CSS、零 JavaScript 的方式精准破局；文章不仅给出开箱即用的核心代码和视觉优化技巧（如结合 `opacity`/`visibility` 实现丝滑过渡、`absolute` 定位提升可控性），还贴心提供了浏览器兼容性现状及旧版回退方案，是构建高性能、可维护响应式导航菜单的必读实践指南。

本文详解如何使用现代 CSS `:has()` 伪类实现父级菜单项 hover 时显示同级子菜单，解决传统相邻/后代选择器无法跨层级匹配的难题，并提供兼容性替代方案。

在构建响应式导航菜单时，一个常见需求是：当用户将鼠标悬停在「Categories」主菜单项上时，动态显示其对应的下拉子菜单（.categories-ul）。但你遇到的问题很典型——子菜单与触发项不在 DOM 树的嵌套关系中（即 .categories-ul 并非 .categories 的子元素或直接后代），而是同级兄弟元素，因此传统 CSS 选择器（如 .categories:hover .categories-ul）完全失效。

✅ 正确解法：使用 :has() 伪类（推荐）

CSS :has() 是一项突破性特性，允许基于后代、兄弟或子元素的状态来选择祖先或同级元素。本例中，我们需在

上监听其内部 .categories:hover 状态，并据此控制同级的 .categories-ul 显示：

.categories-ul {
  display: none; /* 初始隐藏 */
  /* 其他样式保持不变 */
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: all 600ms ease;
}

/* 关键：通过 :has() 检测 nav 内是否存在 hovered 的 .categories */
.pc-nav:has(.categories:hover) .categories-ul {
  display: flex; /* 触发显示 */
  background-color: rgba(255, 0, 0, 0.1); /* 建议用半透红而非纯红，更美观 */
}

✅ 优势：语义清晰、无需 JS、纯 CSS 实现、支持平滑过渡（配合 display: flex + transition 需注意：display 本身不可动画，但可搭配 opacity 和 visibility 实现视觉过渡效果）。

⚠️ 注意事项与增强技巧

浏览器兼容性：:has() 已被 Chrome 105+、Edge 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/?search=%3Ahas）。若需支持旧版浏览器，请采用 JavaScript 方案（如 mouseenter/mouseleave 切换 show 类）。

避免布局跳动：display: none → flex 会引发重排。更优雅的做法是结合 opacity 和 visibility：

.categories-ul {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 确保悬停时不意外触发 */
}
.pc-nav:has(.categories:hover) .categories-ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

定位优化：当前 position: fixed; top: 5rem 可能导致子菜单脱离文档流偏移。建议改为 position: absolute 并将 .pc-nav 设为 position: relative，使定位更可控：
```
.pc-nav { position: relative; }
.categories-ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
}
```

✅ 完整工作示例（精简版）

<nav class="pc-nav">
  <ul class="pc-nav-ul">
    <li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a href="#">categories</a></li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
  <ul class="categories-ul">
    <li class="categories-li"><a href="#">entertainment</a></li>
    <li class="categories-li"><a href="#">literature</a></li>
    <li class="categories-li"><a href="#">science</a></li>
    <li class="categories-li"><a href="#">programming</a></li>
  </ul>
</nav>

只要确保 HTML 结构中 .categories-ul 与 .pc-nav-ul 同属 .pc-nav 容器内，:has() 即可精准捕获状态并驱动交互。这是现代 CSS 解决“跨层级悬停显示”问题的标准范式。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《悬停显示子菜单的 CSS 实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。