很多人试过用 :focus-within 代替 :hover 来实现下拉菜单的悬停，结果发现——鼠标移上去根本没反应。这其实是一个很经典的误区。

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

为什么:focus-within不能替代:hover做悬停

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

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

• 只用 :focus-within → 键盘可用，鼠标悬停失效
• 只用 :hover → 鼠标可用，键盘/触屏不可用（尤其 iOS Safari）
• 两者都写，且规则不冲突 → 才算真正覆盖三类交互

如何让:focus-within和:hover共存不打架

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

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

多级菜单里:focus-within怎么逐级生效

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

• 一级： .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 —— 它会匹配所有嵌套
  ，鼠标一移开一级菜单，三级菜单还挂着

  Safari 和旧版浏览器的兼容性坑

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

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

  最容易被忽略的是：父容器没加 tabindex="0"，或者多级菜单里某一级漏了 position: relative。这两个点一错，整个链路就断了，而且不容易定位——看起来像“有时好有时坏”。

  《夸克》非常好用的免费AI浏览器

  下载APP查看