移动端:hover“卡住”是浏览器延迟清除悬停状态所致，因无mouseout事件；需用@media (hover: hover) and (pointer: fine)精准控制，并以:active或JS模拟替代。
为什么移动端:hover点击后会“卡住”
这不是 bug，是浏览器对悬停状态的延迟清除机制。iOS Safari 和部分 Android Chrome 会把首次触摸当作 :hover 的起点，但没有“手指移开”事件来终结它。滚动、切页、点空白处可能触发清除，但不保证立即发生——真机上点完按钮背景色挂着，大概率就是这个原因。
根本问题在于：移动端根本没有 mouseover/mouseout，只有 touchstart/touchend。浏览器为了兼容旧站，做了“模拟 hover”，但只管进不管出。
@media (hover: hover) and (pointer: fine) 怎么写才生效
@media (hover: hover) 必须带值，写成 @media (hover) 整条规则会被忽略。单独用它不可靠，因为 iPad、Surface Pro 等设备会同时上报 hover: hover 和 pointer: coarse，导致菜单点开就卡住。
必须叠加 pointer: fine 才能精准过滤：
- 只对鼠标、触控笔生效，排除所有手指和触控板场景
- 把所有依赖
:hover的样式（如下拉菜单、工具提示）包进这个媒体查询里 - 顺序要放在常规样式之后，否则会被
.btn:hover覆盖 -
transition属性也得包进去，否则移动 Safari 可能解析到却不用
:active 是移动端最稳的瞬时反馈替代方案
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合。但它在 iOS Safari 默认不触发，除非满足以下任一条件：
- 元素或其祖先有
cursor: pointer（注意：纯 CSS 声明在移动端常被忽略）
- 元素或其祖先绑定了
touchstart 事件（最简做法：<body ontouchstart="">）
- 元素本身是
<button> 或带 role="button" 且有 tabindex="0"
cursor: pointer（注意：纯 CSS 声明在移动端常被忽略）touchstart 事件（最简做法：<body ontouchstart="">）<button> 或带 role="button" 且有 tabindex="0"
另外：:active 动画持续时间建议 ≤ 0.15s；别用 !important 强行覆盖 :hover，而是让 :active 自身定义完整状态（背景、缩放、边框等）。
JS 模拟 is-hovered 类要避开三类坑
监听 touchstart/touchend 并手动切 class 看似灵活，实际容易出问题：
- 触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加
- 滚动干扰：页面滚动时触发
touchstart，误判为点击，样式异常激活
- 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
touchstart，导致 class 未清除就重复添加touchstart，误判为点击，样式异常激活如果非要用，至少在 touchend 后加 setTimeout(() => el.classList.remove('is-hovered'), 0)，避开 iOS 的 300ms click 延迟窗口；更稳妥的是用事件委托，统一在父容器监听，靠 event.target.matches('[data-hoverable]') 判断目标。
真正难的从来不是怎么写 :hover，而是怎么让它的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，藏在你忘了给父容器加 will-change: transform 的那一行注释里。
