纯 css 的 :hover 在移动端不可靠，必须用 @media (hover: hover) and (pointer: fine) 包裹鼠标样式，并为触控设备提供 :active 或 js 模拟的 is-hovered 类；ios/android 将首次触摸视为悬停开始却无结束事件，导致样式卡住，且部分内核不支持 hover 媒体查询。
直接结论：纯 CSS 的 :hover 在移动端不可靠，不能作为关键交互逻辑的唯一依据；必须用 @media (hover: hover) and (pointer: fine) 包裹鼠标专属样式，并为触控设备准备 :active 或 JS 模拟的 is-hovered 类。
为什么 :hover 在 iOS/Android 上会“卡住”或不触发
不是你写错了选择器，而是浏览器把第一次触摸当成“悬停开始”，但没有“悬停结束”事件——iOS Safari 和部分 Chrome 会锁定 :hover 样式，直到你滚动、点击别处或焦点切换才清除。它不是 bug，是规范行为：触控设备本就没有悬停概念。
- 真机点一下卡片，
:hover背景色卡住不退，再点其他地方也没用 -
:hover动画（比如transform: scale()）在 Safari 可能解析了transition却不触发，尤其配合 Vue/React 重渲染时更明显 - 微信 X5 内核、UC、旧版 QQ 浏览器根本不识别
@media (hover: hover)，整块样式被忽略
用 @media (hover: hover) and (pointer: fine) 安全启用鼠标悬停
单独 @media (hover: hover) 在 iPad 或 Surface 上恒为 true，毫无意义；必须叠加 pointer: fine 才表示当前输入方式是鼠标或触控笔，而非手指。
- 所有
:hover相关样式（包括transition、transform、box-shadow）必须包进这个媒体查询里 - 基础样式（默认态）始终写在外面，保证触控设备有可用视觉反馈
- 不要写
@media (hover: hover) and (pointer: coarse)—— W3C 规范中这两者互斥，这条永远不会匹配 - 顺序很重要：媒体查询块必须放在常规样式之后，否则会被覆盖
触控设备必须用 :active 或 JS 模拟 is-hovered
:active 在 iOS Safari 默认不生效，除非元素绑定了 touchstart 或是 <button></button>；而 JS 模拟则要防滑动中断、快速连点残留等坑。
- 给元素加
ontouchstart=""是最轻量的激活方式，能让:active生效 - JS 方案推荐监听
touchstart添加is-hovered类，touchend或touchcancel移除；touchcancel必须监听，否则用户滑动时类名会残留 - 若元素带跳转（如
<a href="...>%EF%BC%89%EF%BC%8C%E8%A6%81%E5%9C%A8%20click%20%E5%9B%9E%E8%B0%83%E9%87%8C%E7%AB%8B%E5%8D%B3%E6%B8%85%E9%99%A4%20is-hovered%EF%BC%8C%E5%90%A6%E5%88%99%E6%96%B0%E9%A1%B5%E9%9D%A2%E5%8F%AF%E8%83%BD%E7%BB%A7%E6%89%BF%E9%94%99%E8%AF%AF%E6%A0%B7%E5%BC%8F %0A - %E5%88%AB%E5%8F%AA%E6%94%B9%E8%83%8C%E6%99%AF%E8%89%B2%E2%80%94%E2%80%94%E7%BB%84%E5%90%88%20
scale(0.98)%20+%20opacity:%200.9%20%E6%9B%B4%E7%AC%A6%E5%90%88%E8%A7%A6%E6%8E%A7%E5%8F%8D%E9%A6%88%E7%9B%B4%E8%A7%89 %0A
%E5%AE%B9%E6%98%93%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E7%BB%86%E8%8A%82%EF%BC%9A%E7%88%B6%E5%AE%B9%E5%99%A8%E5%92%8C%E6%80%A7%E8%83%BD%E8%BE%B9%E7%95%8C
%0A%E7%9C%9F%E6%AD%A3%E8%AE%A9%20:hover%20%E5%85%BC%E5%AE%B9%E5%A4%B1%E6%95%88%E7%9A%84%EF%BC%8C%E5%BE%80%E5%BE%80%E4%B8%8D%E6%98%AF%E4%BC%AA%E7%B1%BB%E6%9C%AC%E8%BA%AB%EF%BC%8C%E8%80%8C%E6%98%AF%E5%91%A8%E5%9B%B4%E7%8E%AF%E5%A2%83%E3%80%82
- %0A
- %E7%88%B6%E5%AE%B9%E5%99%A8%E8%AE%BE%E4%BA%86%20
overflow:%20hidden%EF%BC%8C%E7%BC%A9%E6%94%BE%E5%8A%A8%E7%94%BB%E5%8F%AF%E8%83%BD%E8%A2%AB%E8%A3%81%E6%8E%89 %0A - %E6%B2%A1%E5%8A%A0%20
will-change:%20transform%EF%BC%8CSafari%20%E4%B8%8B%20transition%20%E5%B8%A7%E7%8E%87%E6%8E%89%E5%BE%97%E5%8E%89%E5%AE%B3 %0A - %E7%94%A8%20
tabindex="> 模拟焦点时，键盘用户也能触发，但需确保可访问性语义完整（比如加 <code>role="button"） - 过渡时间别超过
0.15s，长于这个值在低端安卓机上容易卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
