怎样利用CSS :focus-within实现下拉菜单的无缝悬停效果？

作者：袖梨 2026-06-20

:focus-within不能替代:hover做悬停，因其仅响应子元素获焦（如Tab、点击聚焦），不监听鼠标移入；单独使用会导致桌面端悬停失效，必须与:hover配合并正确声明顺序、添加tabindex="0"及定位设置。

能实现，但必须和 :hover 配合用，单独靠 :focus-within 无法做到“无缝悬停”——它只响应焦点，不响应鼠标移入。

:focus-within 触发条件是「父容器内任意子元素获得焦点」，比如用户 Tab 到按钮、点击后聚焦到输入框、或触屏点击触发显式聚焦。它不监听鼠标位置，所以鼠标划过时根本不会激活。

常见错误现象：把 .dropdown:focus-within .dropdown-menu 当成 .dropdown:hover .dropdown-menu 的替代写法，结果桌面端鼠标悬停完全没反应。

关键不是合并写，而是分开声明、顺序控制、定位隔离。浏览器对 :hover 和 :focus-within 的匹配逻辑不同，强行合并选择器（如 .item:hover, .item:focus-within）会导致部分场景下状态丢失或样式覆盖异常。

立即学习“前端免费学习笔记（深入）”；

必须分开写两组规则，:focus-within 放在 :hover 后面，确保它能覆盖隐藏逻辑
父容器（如 <li class="dropdown">）必须加 tabindex="0"，否则无法获得焦点，:focus-within 永远不生效
子菜单（.dropdown-menu）不要设 display: none 初始值，改用 opacity: 0; visibility: hidden; pointer-events: none;，避免鼠标移入时因区域丢失导致闪退
过渡动画要写在 .dropdown-menu 上，而不是触发器上：transition: opacity 0.2s, transform 0.2s;

浏览器不会自动“延续”焦点状态到后代，每一级都得显式声明触发关系。错一个层级，二级菜单就挂不上。

一级： .dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu
二级： .dropdown-menu > li:hover > .dropdown-menu, .dropdown-menu > li:focus-within > .dropdown-menu
每级父容器都要设 position: relative，否则 position: absolute 的子菜单会相对 body 定位，飘出视口
不要用泛化选择器如 li:hover ul —— 它会匹配所有嵌套 <ul>，鼠标一移开一级菜单，三级菜单还挂着

:focus-within 在 Safari 15.4+（对应 iOS 15.4+/macOS Monterey+）才稳定支持。更早版本直接忽略该伪类，导致键盘用户完全打不开菜单。

必须配合 JS 回退：检测 CSS.supports('selector(:focus-within)')，不支持时动态添加 .js-focus-within 类，用 JS 监听 focusin/focusout
移动端触屏设备首次点击默认不触发 :focus-within，必须给触发按钮（如 <button>）加 tabindex="0" 并手动 .focus()
别信 @media (hover: hover) 能区分设备——它只说明设备“有能力 hover”，不解决用户想点却点不开的问题