如何仅在悬停汉堡按钮时显示导航菜单（使用 CSS :has() 实现精准控制）-html教程-PHP中文网

如何仅在悬停汉堡按钮时显示导航菜单（使用 CSS :has() 实现精准控制）

本文详解如何利用现代 CSS 的 :has() 选择器，精准触发导航菜单显示——仅当用户悬停或聚焦于汉堡按钮时生效，避免误触 header 其他区域导致菜单意外展开。

本文详解如何利用现代 css 的 `:has()` 选择器，精准触发导航菜单显示——仅当用户悬停或聚焦于汉堡按钮时生效，避免误触 header 其他区域导致菜单意外展开。

在构建响应式导航栏时，一个常见痛点是：希望汉堡按钮（☰）在悬停或聚焦时动画变形并展开下拉菜单，但传统相邻/后代选择器难以跨层级精确绑定交互状态。你当前使用的 :is(header:hover, header:focus-within) nav 方案会因整个

区域响应悬停而失去控制粒度；而直接写 .menu-button:hover nav 则因

✅ 正确解法：使用 header:has(.menu-button:hover, .menu-button:focus-within) nav
该选择器语义清晰：“当 header 内部存在处于 hover 或 focus-within 状态的 .menu-button 时，匹配其内部的 nav 元素”。它精准锚定交互源（按钮），同时作用于逻辑关联的目标（导航菜单），无需 JavaScript，纯 CSS 可控。

以下是关键修复代码段（已整合进完整样式）：

/* ✅ 精准控制：仅当按钮被悬停或获得焦点时显示 nav */
header:has(.menu-button:hover, .menu-button:focus-within) nav {
  display: block;
}

/* 保持原有动画与基础样式 */
nav {
  display: none; /* 默认隐藏 */
  background-color: var(--HEADER-BGCOLOR);
  transform-origin: top center;
  animation: showMenu 0.5s ease-in-out forwards;
}

@keyframes showMenu {
  0% { transform: scaleY(0); }
  80% { transform: scaleY(1.2); }
  100% { transform: scaleY(1); }
}

? 重要注意事项：

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

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

浏览器兼容性：:has() 已获 Chrome 105+、Edge 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/?search=%3Ahas）。若需支持旧版浏览器（如 IE 或早期 Safari），应搭配 JavaScript 回退方案（例如切换 .is-open 类）。
无障碍增强：focus-within 确保键盘用户（Tab 导航至按钮后按 Enter/Space）也能触发菜单，符合 WCAG 2.1 标准。建议为按钮添加 aria-expanded 属性并在 JS 中同步更新状态。
结构依赖性：此方案严格依赖 HTML 结构——
必须是
的直系子元素（如示例中所示）。若嵌套层级变化（如
移入
内），选择器需相应调整为 header:has(.menu-button:...) section nav。