触屏设备上:hover“卡住”是因浏览器在触控场景下缺乏hover退出机制，iOS/Android仅模拟mouseover却无对应mouseout；解决需用@media (hover: hover) and (pointer: fine)精准控制，并优先采用:active或JS模拟类配合防误触处理。
为什么触屏设备上:hover会“卡住”不退
这不是 CSS 写错了，也不是浏览器 bug，而是浏览器对 :hover 的状态管理机制在触控场景下天然缺失“退出”逻辑。iOS Safari 和 Android Chrome 会在首次 touchstart 时模拟一次 mouseover，激活 :hover，但没有对应的 mouseout 或“手指离开”事件来清除它。
结果就是：点一下按钮，.btn:hover 背景色挂着几秒甚至一直不退；滚动页面、切 Tab、点空白处才可能触发重置——但不保证，也不及时。
- iOS Safari 会把该元素标记为“已 hover”，直到外部上下文变化（如焦点切换）才释放
- 原生
<button></button>更难控制，因为它自带高亮逻辑，和 CSS:hover并行运行 - 微信/QQ 内置浏览器（X5 内核）甚至忽略
:hover状态更新，残留更顽固
@media (hover: hover) 单独用为什么不管用
@media (hover: hover) 只表示“设备能力支持悬停”，不表示“当前正在用鼠标”。iPad 接妙控板、Surface Pro 插触控笔时，浏览器同时上报 hover: hover 和 pointer: coarse，导致你写的 .menu:hover { display: block; } 在手指点一下后就“卡开”。
真正有效的守门条件是：@media (hover: hover) and (pointer: fine) —— 它要求主输入方式既支持悬停，又属于精细类型（鼠标/触控笔），自动排除所有手指触控。
- 别写
@media (hover: hover) and (pointer: coarse)：W3C 规范里二者互斥，这条永远不匹配 - 必须把整段
:hover规则（包括transition）都包进去，否则移动 Safari 可能解析到动画却不用 - 这条规则必须放在常规样式之后，否则会被
.btn:hover直接覆盖
:active 是最稳的触摸反馈替代方案
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合。但它在 iOS Safari 默认不生效，除非满足以下任一条件：
- 元素或其任意祖先绑定了
touchstart事件（最简做法：） - 元素本身是
<button></button>或带role="button"且有tabindex="0" -
cursor: pointer对移动端无效，纯 CSS 声明不会激活:active
:active 动画持续时间建议 ≤ 0.15s；别用 !important 强行覆盖 :hover，而是让 :active 自身定义完整状态（背景、缩放、边框等）。
JS 模拟 is-hovered 类容易踩的坑
监听 touchstart/touchend 手动切 class 看似灵活，实操中极易出问题：
- 触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加 - 滚动干扰：页面滚动时触发
touchstart，误判为点击，样式异常激活 - 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
- 必须调用
e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除 class——用户滑动时touchend很可能不触发，推荐用setTimeout延迟 300ms 清除
真正难的从来不是怎么写 :hover，而是怎么让它的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
