:hover 在移动端不会导致点击异常，但会因触控无悬停状态而残留样式，ios safari 将元素标记为“已 hover”直至滚动或焦点切换，:active 无法覆盖，transition 可能持续触发动画。
:hover 本身不会导致点击异常，但它的存在会干扰移动端原生点击流程，尤其在 iOS Safari 和部分 Android Chrome 中引发样式残留、响应延迟或交互错乱。
为什么 iOS Safari 点击后 :hover 样式不退
移动端没有“悬停”物理状态，浏览器只能对首次 touchstart 做一次模拟 hover 触发，但没有对应“悬停结束”事件。iOS Safari 会把该元素标记为“已 hover”，直到用户滚动、切换焦点或点击其他区域才清除——不是 bug，是规范行为。结果就是：点一下按钮，.btn:hover 背景色卡住不退，再点别处也没用。
- 这不是 CSS 写错了，而是浏览器对
:hover的状态管理逻辑与触控输入不匹配 -
:active在松开手指后立即失效，无法覆盖残留的:hover，反而可能造成视觉跳变 - 若同时用了
transition，残留 hover 会持续触发过渡动画（比如缩放、opacity 变化），进一步放大异常感
@media (hover: hover) and (pointer: fine) 不是万能开关
这个媒体查询常被误当作“是否是触摸设备”的判断，但它实际含义是：“当前主输入方式既支持悬停，又足够精细”——即鼠标或触控笔，自动排除手指。但它不能解决已存在的 hover 残留问题，只用于预防。
- 单独写
@media (hover: hover)在 iPad 或 Surface 上恒为 true，完全不可靠 - 必须把整段
:hover规则（包括transition）都包进去，否则移动 Safari 可能解析到 transition 却不触发 hover，导致组件重渲染时意外动画 - 旧版微信 X5 内核、UC、QQ 浏览器根本不识别该媒体查询，会直接忽略整块 CSS
- 顺序很重要：必须放在常规样式之后，否则会被
.btn:hover直接覆盖
用 JS 模拟 is-hovered 类时最容易漏掉的三件事
手动控制类名看似可控，但触控场景下事件生命周期比鼠标复杂得多。
- 必须在
touchstart中调用e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除is-hovered——用户滑动时touchend很可能不触发；推荐用setTimeout延迟 300ms 清除 - 如果元素是
<a href></a>或有跳转行为，要在click回调里立即清除is-hovered，否则新页面加载后样式被污染
:hover 和 <button></button> 在移动端更难控制
原生表单控件（<button></button>、<input type="button">）在移动端自带一套点击高亮逻辑，和 CSS :hover 并行运行，且优先级不受你控制。
- 即使你写了
button:hover { background: blue; }，iOS 可能仍叠加一层半透明灰色遮罩 - 给
<button></button>加tabindex="0"或绑定touchstart能激活:active，但无法禁用系统高亮 - 最稳做法：放弃
:hover，改用:active+transform: scale(0.98)+opacity: 0.8组合，持续时间 ≤ 0.15s
真正麻烦的从来不是怎么让 hover 生效，而是它在不同输入方式之间没有明确边界——你删掉一行 @media，可能就让 iPad 用户失去过渡动画；你忘了给父容器加 will-change: transform，touchstart 后的 is-hovered 就会卡顿半秒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
