本文介绍如何利用 CSS 的 :focus-within 伪类，无需 JavaScript 即可让巨型菜单在鼠标悬停或键盘 Tab 焦点进入时自动展开，兼顾可访问性与简洁性。

本文介绍如何利用 css 的 `:focus-within` 伪类，无需 javascript 即可让巨型菜单在鼠标悬停或键盘 tab 焦点进入时自动展开，兼顾可访问性与简洁性。

实现可访问的巨型菜单（Mega Menu）的关键在于同时支持鼠标交互（hover）和键盘导航（focus）。原方案尝试对

元素直接设置 tabindex 并使用 :focus，但因

默认不可聚焦，且焦点实际落在其内部的 链接上，导致 li:focus 无法触发——这是常见误区。

解决方案是改用现代 CSS 伪类 :focus-within：它会在该元素自身或其任意后代元素获得焦点时匹配，完美适配

包含可聚焦子元素（如 ）的结构。

以下是核心修改点：

✅ 将 CSS 中的 li.has-children:focus .mm-cont 替换为

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

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

下载

li.has-children:focus-within .mm-cont {
  display: flex;
}

✅ 确保 元素天然可聚焦（默认即支持），无需额外 tabindex；
✅

本身仍保留 tabindex="1"（或其他非负值）以支持顺序聚焦，但不再依赖其直接获得焦点——focus-within 会自动响应其子链接获得焦点的状态。

完整生效逻辑如下：

• 用户 Tab 导航至
• 内的 → 获得焦点 →
• 触发 :focus-within → .mm-cont 显示；
• 鼠标悬停在
• 上 → :hover 触发 → .mm-cont 同样显示；
• 两者互不干扰，共用同一显示规则，语义清晰、维护简单。

⚠️ 注意事项：

• :focus-within 已获主流浏览器广泛支持（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），旧版 Safari 需谨慎评估兼容性；
• 若需支持更老环境，应降级为 JavaScript 方案（监听 focusin 事件）；
• 建议为 .mm-cont 添加 outline: none 或自定义焦点样式，避免重复外边框影响视觉；
• 所有可聚焦元素（如 ）应具备明确的视觉焦点指示，符合 WCAG 2.1 可访问性标准。

最终效果：用户通过 Tab 键流畅导航至菜单项时，巨型子菜单即时展开；鼠标悬停亦同步响应——纯 CSS 实现，零 JS 依赖，兼顾体验与无障碍。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！