display: none 会彻底移除元素的渲染树节点，导致 :hover、:focus、:active 等伪类全部失效；需改用 visibility + opacity 组合并手动管理焦点与事件。
display: none 会彻底移除元素的渲染状态，:hover、:focus、:active 等伪类自然全部失效——这不是 bug，是浏览器按规范执行的结果；想保留交互反馈，必须改用 visibility + opacity 组合，并手动管理焦点与事件绑定。
为什么 :hover/:focus 在 display:none 后永远不触发
元素设为 display: none 后，它从渲染树中被完全剥离：不参与布局、不响应鼠标事件、不接受键盘焦点、不触发任何伪类匹配。哪怕你之后 JS 切回 display: block，之前的 :hover 状态也不会“恢复”，因为浏览器根本没保存它。
常见误判场景：
- 点击按钮后
el.style.display = 'none'，再点击另一处试图让该元素 :focus —— 不可能，它当前不可聚焦 - 用
:hover控制下拉菜单，父级一设display: none，子菜单所有 hover 样式瞬间清空，且后续无法靠 CSS 自动重建 - 表单元素（如
input）被display: none后，即使再切回来，:focus-within也需用户真实点击才能重新激活
用 visibility + opacity 替代时，如何让 :hover 保持可用
关键不是“隐藏”，而是“保持可交互性”。visibility: hidden 元素仍存在于渲染树中，只是不可见；配合 pointer-events: none 可精细控制是否响应鼠标：
- 要保留
:hover但视觉上隐藏？→opacity: 0; visibility: visible;+pointer-events: auto; - 要彻底禁用交互但保留占位？→
opacity: 0; visibility: hidden;+pointer-events: none; - 过渡中防止误触？→ 隐藏阶段加
pointer-events: none，显示完成后再移除
示例写法：
.menu-trigger { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s; }<br>.menu-trigger.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
:focus 和键盘导航在 display 切换后为何中断
display: none 会强制移除元素的焦点能力，且浏览器不会自动将焦点转移给其他元素。如果用户正用 Tab 键聚焦到某个按钮，你 JS 执行了 el.style.display = 'none'，焦点就“丢失”了——既不在原元素，也不跳到下一个可聚焦项，键盘操作直接卡住。
安全做法：
- 隐藏前，用
el.blur()主动释放焦点 - 若需保持导航流，手动
nextFocusableEl.focus() - 显示时，别依赖
:focus自动生效，而应在transitionend后调用el.focus()（并确保tabindex存在） - 对模态框等关键组件，必须同步设置
aria-hidden="true"和inert属性，否则屏幕阅读器仍会读取已隐藏内容
真正难处理的是 :active 和 :focus-within 的状态残留
当元素被 display: none 时，:active 状态立即清除；但若你在 JS 中监听 mousedown 后立刻隐藏，mouseup 事件可能触发在空白区域，导致 :active 样式“闪一下就消失”，体验割裂。
更隐蔽的问题是 :focus-within：它依赖子元素是否获得焦点。一旦父容器设为 display: none，整个子树失焦，:focus-within 失效；即使恢复显示，也不会自动重置——必须等子元素再次被聚焦才重新匹配。
建议方案：
- 避免在
mousedown或keydown回调里直接设display: none，改用setTimeout(() => { el.style.display = 'none'; }, 0)让浏览器先完成 :active 渲染帧 - 对
:focus-within容器，显示后主动el.querySelector('input').focus()触发重匹配 - 不要指望 CSS 自动“修复”状态，所有交互链路都得由 JS 显式维护：焦点、aria 属性、inert、tabindex
最易被忽略的点：伪类状态不是样式快照，而是实时计算结果。只要元素脱离渲染树，所有依赖其存在性的伪类就归零——这个底层逻辑，比任何 CSS 技巧都优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
