: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。这两个点一错，整个链路就断了，而且不容易定位——看起来像“有时好有时坏”。
