如何修复CSS display:none切换后伪类状态丢失的问题？

display: none 会彻底移除元素的渲染树节点，导致 :hover、:focus、:active 等伪类全部失效；需改用 visibility + opacity 组合并手动管理焦点与事件。

display: none 会彻底移除元素的渲染状态，:hover、:focus、:active 等伪类自然全部失效——这通常不是异常，是浏览器按规范执行的结果；想保留交互反馈，必须改用 visibility + opacity 组合，并手动管理焦点与事件绑定。

为什么 :hover/:focus 在 display:none 后永远不触发

元素设为 display: none 后，它从渲染树中被完全剥离：不参与布局、不响应鼠标事件、不接受键盘焦点、不触发任何伪类匹配。哪怕你之后 JS 切回 display: block，之前的 :hover 状态也不会“恢复”，因为浏览器根本没保存它。

常见误判场景：

1. 点击按钮后 el.style.display = 'none'，再点击另一处试图让该元素 :focus —— 不可能，它当前不可聚焦
2. 用 :hover 控制下拉菜单，父级一设 display: none，子菜单所有 hover 样式瞬间清空，且后续无法靠 CSS 自动重建
3. 表单元素（如 input）被 display: none 后，即使再切回来，:focus-within 也需用户真实点击才能重新激活

用 visibility + opacity 替代时，如何让 :hover 保持可用

关键不是“隐藏”，而是“保持可交互性”。visibility: hidden 元素仍存在于渲染树中，只是不可见；配合 pointer-events: none 可精细控制是否响应鼠标：

1. 要保留 :hover 但视觉上隐藏？→ opacity: 0; visibility: visible; + pointer-events: auto;
2. 要彻底禁用交互但保留占位？→ opacity: 0; visibility: hidden; + pointer-events: none;
3. 过渡中防止误触？→ 隐藏阶段加 pointer-events: none，显示完成后再移除

示例写法：

.menu-trigger { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s; }
.menu-trigger.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

:focus 和键盘导航在 display 切换后为何中断

display: none 会强制移除元素的焦点能力，且浏览器不会自动将焦点转移给其他元素。如果用户正用 Tab 键聚焦到某个按钮，你 JS 执行了 el.style.display = 'none'，焦点就“丢失”了——既不在原元素，也不跳到下一个可聚焦项，键盘操作直接卡住。

安全做法：

1. 隐藏前，用 el.blur() 主动释放焦点
2. 若需保持导航流，手动 nextFocusableEl.focus()
3. 显示时，别依赖 :focus 自动生效，而应在 transitionend 后调用 el.focus()（并确保 tabindex 存在）
4. 对模态框等关键组件，必须同步设置 aria-hidden="true" 和 inert 属性，否则屏幕阅读器仍会读取已隐藏内容

真正难处理的是 :active 和 :focus-within 的状态残留

当元素被 display: none 时，:active 状态立即清除；但若你在 JS 中监听 mousedown 后立刻隐藏，mouseup 事件可能触发在空白区域，导致 :active 样式“闪一下就消失”，体验割裂。

更隐蔽的问题是 :focus-within：它依赖子元素是否获得焦点。一旦父容器设为 display: none，整个子树失焦，:focus-within 失效；即使恢复显示，也不会自动重置——必须等子元素再次被聚焦才重新匹配。

建议方案：

1. 避免在 mousedown 或 keydown 回调里直接设 display: none，改用 setTimeout(() => { el.style.display = 'none'; }, 0) 让浏览器先完成 :active 渲染帧
2. 对 :focus-within 容器，显示后主动 el.querySelector('input').focus() 触发重匹配
3. 不要指望 CSS 自动“修复”状态，所有交互链路都得由 JS 显式维护：焦点、aria 属性、inert、tabindex

最易被忽略的点：伪类状态不是样式快照，而是实时计算结果。只要元素脱离渲染树，所有依赖其存在性的伪类就归零——这个底层逻辑，比任何 CSS 技巧都优先。