:pointer-events: none 会使元素彻底退出事件流，:hover 失效；正确做法是悬停时让上层遮挡主动退场（如 opacity: 0 + pointer-events: none），而非依赖 hover 恢复事件响应。
pointer-events: none 会让元素彻底退出事件流，:hover 也同步失效——所以“用 :hover 配合 pointer-events 防止穿透”本身是个伪命题。真正可行的是：**在悬停时临时关闭上层遮挡，让下层可交互区域暴露出来**。
为什么:hover + pointer-events: none 不能“防止”穿透
一旦元素设了 pointer-events: none，它就不再参与 hit-testing，浏览器连 hover 状态都不会计算。也就是说：.overlay:hover { pointer-events: none; } 这种写法毫无意义——hover 根本触发不了，因为初始状态就已屏蔽事件。
-
pointer-events: none是硬性开关，不是条件开关；它不依赖鼠标是否悬停 -
:hover伪类只对pointer-events: auto（或未设）的元素生效 - 想靠 hover “恢复”事件响应，必须先确保该元素本身能被 hover 到——即初始不能是
none
正确做法：hover 时让上层“让路”，而非“锁死”
典型场景：一个悬浮提示层（.tooltip）盖住了下方按钮，但你希望鼠标移到按钮上时，提示层暂时消失，避免误点错目标。
- 给提示层设
pointer-events: auto（默认即可），让它能响应:hover - 用
.tooltip:hover或父容器.btn:hover .tooltip控制其显隐，例如opacity: 0; pointer-events: none; - 关键点：让提示层在 hover 期间主动退场，而不是靠
none挡住一切
示例：
立即学习“前端免费学习笔记（深入）”；
.btn {
position: relative;
}
.tooltip {
position: absolute;
top: 100%;
left: 0;
pointer-events: auto; /* 必须可 hover */
}
.btn:hover .tooltip {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}移动端要注意：:hover 在触屏设备上基本不可靠
iOS 和安卓主流浏览器中，:hover 只在模拟桌面模式或极少数触发条件下短暂生效，无法作为稳定交互依据。
- 不要依赖
.tooltip:hover在手机上隐藏自身——用户根本 hover 不到 - 真机环境请改用 JS 监听
touchstart或 class 切换控制显隐 - 若必须用 CSS 方案，可用
:focus-within配合tabindex，但仅限可聚焦元素
容易被忽略的层叠上下文干扰
即使你写了 .tooltip:hover { pointer-events: none; }，如果它的父容器有 transform、filter 或 will-change，可能创建独立层叠上下文，导致 hover 区域和视觉位置错位。
- 打开 Chrome DevTools → Rendering → 勾选 “Layer borders” 和 “Hit test borders”
- 确认 hover 时高亮的热区是否真覆盖了提示层本身，而不是被父级裁剪或偏移
- 临时加
outline: 1px solid red到疑似父容器，看是否意外遮住了热区
真正难调的不是语法，而是 hover 是否真能命中那个 DOM 节点——尤其当它被 position: absolute 移出文档流又没配好 top/left 时。
