因为ipad等触控设备浏览器恒报(hover: hover)为true，仅表示支持悬停而非当前使用鼠标，必须组合@media (hover: hover) and (pointer: fine)才能精准匹配鼠标/触控笔场景，排除手指触控。
为什么@media (hover: hover)单独用在iPad上永远生效？
因为 iPad 等触控设备的主输入是触控笔或手指，但浏览器仍报告 (hover: hover) 为 true——它只表示“支持悬停”，不表示“当前正在用鼠标”。单独判断毫无意义，@media (hover: hover) 在 iPad、Surface 上恒为 true，根本无法区分真实悬停场景。
真正可靠的写法必须组合：@media (hover: hover) and (pointer: fine)。这个媒体查询才表示“当前主输入是精细指针（鼠标/触控笔），且支持悬停”。它排除了纯触控设备，也排除了仅支持粗粒度输入（pointer: coarse）的手机。
- 必须带值：
hover: hover，不能写成hover（整条规则会被忽略） - 必须和
pointer: fine同时存在，二者缺一不可 - 这条规则要放在常规样式之后，否则
.btn:hover会直接覆盖它 -
transition属性也得包进媒体查询里，否则 Safari 可能解析到却不用
移动端:hover“卡住”不是 bug，是没退出机制
iOS Safari 和 Android Chrome 会把第一次 touchstart 当作 mouseover 触发 :hover，但没有对应的 mouseout 来清除状态。滚动、切页、点空白处可能清掉，但不保证——真机上点完按钮背景色还挂着，就是这个原因。
常见错误现象包括：下拉菜单 点一下就展开又瞬间收起、按钮 点击后 background-color 残留数秒、同一页面多个可悬停元素点一个后其他 :hover 样式也异常激活。
- 别依赖
:active替代：:active在 iOS Safari 默认不生效，除非元素是<button></button>、带role="button"+tabindex，或绑定了touchstart事件（最简做法：） -
:active动画持续时间建议 ≤ 0.15s；单改背景色不够可靠，推荐组合transform: scale(0.95)+opacity: 0.8 - 父容器若设了
overflow: hidden，可能裁掉缩放区域
如何让遮罩层透点击，但保留关闭按钮可交互？
pointer-events: none 必须加在遮挡元素自身上，它不继承、不传播、只对声明它的那个元素生效。加在父容器或兄弟节点上，下层按钮依然点不了。
错误写法：.container { pointer-events: none; } → 子元素全失活；正确写法：.overlay { pointer-events: none; } → 仅屏蔽遮盖层本身。
- 如果遮罩层里有关闭按钮，必须额外写：
.overlay .close-btn { pointer-events: auto; } -
opacity: 0或visibility: hidden不等于禁用交互，必须配pointer-events: none才真正透传 - 父元素设
pointer-events: none时，子元素即使设auto也无法响应点击——事件检测自顶向下，父级为none就跳过整棵子树
伪元素 :before/:after 遮挡父元素怎么办？
伪元素虽非 DOM 节点，但渲染层中仍参与 hit-testing。如果 ::before 或 ::after 绝对定位覆盖了父元素内容区，鼠标事件就会被它拦截，导致父元素 :hover 或 click 失效。
解决方式只有两种：要么调低伪元素 z-index（前提是父元素已建立层叠上下文），要么直接给伪元素加 pointer-events: none。
- 伪元素不能绑定事件监听器，所以
pointer-events: none是唯一轻量解法 - 不要试图靠
z-index“压”伪元素下去——若父元素未触发层叠上下文（如没设position、transform等），z-index无效 - 注意：某些动画库或框架会动态插入伪元素，需检查是否覆盖了关键交互区域
:hover，而是怎么让它的边界在不同输入方式之间自动收敛——媒体查询的组合条件、伪元素的事件穿透、父级 pointer-events 的不可逆屏蔽，这三者一旦混用，调试成本会指数上升。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
