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

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

能实现，但必须和 :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 后面，确保它能覆盖隐藏逻辑
• 父容器（如 <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;

多级菜单里: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 —— 它会匹配所有嵌套 <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，必须给触发按钮（如 <button>）加 tabindex="0" 并手动 .focus()
• 别信 @media (hover: hover) 能区分设备——它只说明设备“有能力 hover”，不解决用户想点却点不开的问题

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