移动端无 hover 状态是正常设计，因触摸设备缺乏悬停概念；应使用 @media (hover: hover) and (pointer: fine) 检测并包裹相关样式，:active 需配合 touchstart 或 cursor:pointer 启用，JS 模拟易引发触摸穿透、滚动干扰与内存泄漏。
移动端没有 hover 状态，:hover 本就不该“正常触发”——这不是 bug，是浏览器对交互模型的忠实实现。
根本原因：触摸设备没有悬停概念
桌面端靠鼠标指针在元素上方“停留”触发 :hover；而手机、iPad 等触摸屏只有 touchstart / touchend / click，没有“悬停中”这个中间状态。浏览器为了兼容旧站，会做一次性的模拟（比如首次点击时短暂激活 :hover），但不会维持、也不会再次触发。
- iOS Safari 加载完页面就清空所有
:hover状态，后续点按基本不触发 - 部分 Android Chrome 会延迟到手指抬起才模拟一次
:hover，造成卡顿或闪烁 - Surface Pro、带触控板的 iPad 等混合设备可能同时上报
hover: hover和pointer: coarse，导致样式错乱
@media (hover: hover) and (pointer: fine) 才是可靠检测方式
别用 'ontouchstart' in window 或 UA 字符串判断设备类型——现代浏览器里这些值早已失真。真正能反映“是否支持持续悬停”的，是 CSS 媒体查询中的 hover 特性值。
-
@media (hover: hover)单独写无效，必须带值；写成@media (hover)整条规则会被忽略 - 必须叠加
pointer: fine，才能排除手指触控场景（coarse表示粗粒度输入，如手指） - 把所有依赖
:hover的样式（比如卡片浮起、下拉菜单展开）包进这个媒体查询里，否则在触摸设备上仍可能被意外应用 - transition 属性也得包进去，否则 Safari 可能解析到但不执行动画
:active 是移动端最可控的瞬时反馈替代方案
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合——但它在 iOS Safari 默认不工作，除非满足以下任一条件：
- 元素或其祖先有
cursor: pointer（但纯 CSS 声明在移动端常被忽略） - 元素或其祖先绑定了
touchstart事件（最简做法：） - 元素本身是
或带role="button"且有tabindex="0" -
:active动画建议 ≤ 0.15s；避免用!important覆盖:hover，而是让:active自身定义完整状态（背景、缩放、边框等）
JS 模拟 is-hovered 类容易踩三类坑
监听 touchstart/touchend 并手动切 is-hovered 类看似灵活，实际在真实项目中极易出问题：
- 触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加 - 滚动干扰：页面滚动时也可能触发
touchstart，误判为点击，样式异常激活 - 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
真要 JS 控制，优先考虑用 focus-within 配合 tabindex，它天然兼容键盘导航和屏幕阅读器，且无运行时副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
