点击穿透是上层透明可点击元素未设pointer-events:none时，事件穿透至下层导致伪类失效的正常行为；需分层控制pointer-events并配合js阻止冒泡。
点击穿透是什么，为什么伪类会失效
当上层元素透明但可点击（比如 opacity: 0 或 visibility: hidden 未设 pointer-events: none），下层元素实际接收了点击事件，上层的 :hover、:active 就不会触发——这不是浏览器 bug，是事件捕获/冒泡和渲染层叠共同导致的正常行为。
常见于模态框遮罩层、过渡动画中的临时占位元素、或用 transform 移出视口但 DOM 仍存在的情况。
pointer-events: none 的作用范围和限制
它让元素完全不参与鼠标事件，包括 :hover、:active、:focus-within 等伪类，也阻止 click、mouseenter 等事件冒泡到它自身。
- 对
pointer-events: none的父元素设置该属性，子元素**不会继承**，但子元素也会被“跳过”（除非子元素显式设为auto） -
pointer-events: none对:focus无效（焦点仍可通过Tab进入），如需禁用键盘交互，还得配合tabindex="-1"或disabled - SVG 元素支持更细粒度值（如
visiblePainted），但 HTML 元素只认auto和none
如何安全地启用上层伪类又不阻断下层交互
关键不是“全关”或“全开”，而是分层控制：让上层响应鼠标状态（如悬停变色），但把点击穿透给下层。这时不能只靠 pointer-events: none，得配合 pointer-events: auto 显式声明可交互区域。
典型做法：
- 给遮罩层（如
.overlay）设pointer-events: none - 给遮罩层内需要响应
:hover的按钮或图标等子元素，单独设pointer-events: auto - 如果该子元素本身要触发下层点击，再用
event.stopPropagation()或event.preventDefault()控制（JS 层面）
示例：
.overlay {
pointer-events: none;
}
.overlay .control-btn {
pointer-events: auto;
}
.overlay .control-btn:hover {
opacity: 0.8;
}
这样按钮能触发 :hover，但点击时默认仍会穿透到底层——如果不想穿透，就得在 JS 中监听并阻止。
容易忽略的兼容性和副作用
pointer-events 在 IE10+、Edge 12+、Chrome 4+、Firefox 3.6+ 支持良好，但 iOS Safari 低于 13.4 有 bug：设了 pointer-events: none 的元素若含 input 或 textarea，键盘可能无法唤起。
另一个坑是动画场景：用 opacity: 0 配合 pointer-events: none 做淡出，若 CSS 过渡未完成就移除节点，部分浏览器（尤其是旧版 Safari）可能残留事件绑定，导致后续点击异常。
真正保险的做法是：动画结束回调中再设 display: none 或移除 DOM，而不是仅靠 pointer-events 和 opacity。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
