:hover 在移动端本不该生效，应通过@media (hover: hover) and (pointer: fine) 精准控制、ontouchstart="" 关闭悬停栈、:active 手动补全及 js 模拟 is-hovered 类来适配多端交互。
不能靠修复，只能绕开 —— :hover 在移动端本就不该生效，强行让它“工作”反而会卡住、残留、误触发。
为什么 @media (hover: hover) and (pointer: fine) 是唯一靠谱的守门员
单独写 @media (hover: hover) 在 iPad 或 Surface 上恒为 true，哪怕你正用手指点；@media (any-hover: hover) 更糟，连蓝牙鼠标都算进来，完全无法反映当前输入方式。只有 @media (hover: hover) and (pointer: fine) 才表示“此刻主输入是鼠标或触控板”，自动排除所有手指触控场景。
- 这条媒体查询只在 iOS Safari 13.4+、Chrome 82+ 等较新内核中有效，旧版安卓 WebView 和微信 X5 内核直接忽略整块规则
- 必须把媒体查询块写在常规样式之后，否则
.btn:hover会覆盖它 -
transition属性也得包进这个媒体查询里，否则移动 Safari 可能解析到 transition 却不触发 hover，导致 Vue/React 组件重渲染时意外动画
ontouchstart="" 是最轻量的“关开关”操作
给按钮、卡片等可交互元素加 ontouchstart=""，多数浏览器（包括 iOS Safari、主流安卓 Chrome）检测到后，会主动放弃维护该元素的 hover 状态栈 —— 这不是 hack，是浏览器内建的兼容策略。
- 不需要写 JS，不增加 bundle 体积，兼容性比媒体查询更好
- 只对加了该属性的元素生效，不影响其他区域的悬停逻辑
- 注意：它只是让 hover 不再被“锁住”，但不会让 hover 在触摸时持续生效 —— 别指望它实现悬停反馈
:active 必须手动补，且 iOS Safari 要“认出”你是可点击目标
:active 在 iOS Safari 默认不生效，除非元素或其祖先满足以下任一条件：
- 是原生
<button></button>或带role="button"且有tabindex - 绑定了
touchstart事件（最简写法：） - 设置了
cursor: pointer—— 但注意：纯 CSS 声明在移动端被忽略，无效
建议组合使用：transform: scale(0.98) + opacity: 0.9，持续时间 ≤ 150ms；同时确保父容器没设 overflow: hidden，否则缩放会被裁剪。
需要维持悬停态？JS 模拟 is-hovered 类是唯一可控路径
如果交互依赖“悬停态维持”（比如下拉菜单、图片放大），不能只靠伪类。监听 touchstart 添加 is-hovered 类，监听 touchend 或 touchcancel 移除：
element.ontouchstart = () => element.classList.add('is-hovered');
element.ontouchend = () => element.classList.remove('is-hovered');
element.ontouchcancel = () => element.classList.remove('is-hovered');
- 不要用
onclick触发，它有约 300ms 延迟 - 快速连点多个元素时，前一个可能残留，建议统一清理全局状态
- 若用事件委托，需加
{ passive: false }并调用e.preventDefault()，防止在滚动容器内误触发
真正容易被忽略的是上下文：overflow: hidden 的父容器、未设 position: relative 的变换元素、JIT 模式未开启导致 Tailwind 类未编译 —— 这些问题常被误判为 “hover 失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
