移动端:hover“卡住”非bug而是规范行为：因无mouseout事件，浏览器不主动清除悬停状态，依赖滚动、焦点切换等外部信号重置；需用@media (hover: hover) and (pointer: fine)精准控制，并配合:active或js模拟交互反馈。
因为移动端没有“悬停”这个物理动作，浏览器只能模拟，而各厂商对模拟逻辑的实现差异很大——iOS Safari 把第一次 touchstart 当作 :hover 激活，但不提供退出机制；Android Chrome 有时闪一下就收，有时卡住不退；X5 内核（微信/QQ 浏览器）甚至直接忽略更新。
为什么第一次点击后:hover样式“卡住”不消失
这不是 bug，是规范行为：移动端没有 mouseout 事件，:hover 被激活后，浏览器不会主动清除它。它依赖外部信号重置，比如：
- 用户滚动页面
- 焦点切换到其他可聚焦元素
- 点击空白区域或另一个元素
- 触发一次
focus()或blur()（部分内核响应）
真机上点完按钮背景色还挂着，大概率就是这些条件一个都没触发。
@media (hover: hover) 单独用为什么没用
@media (hover: hover) 只表示“设备支持悬停”，不表示“此刻正在用鼠标”。iPad 接妙控板、Surface Pro 插触控笔时，会同时上报 hover: hover 和 pointer: coarse，导致你写的 .menu:hover { display: block; } 在手指点一下后就“卡开”。
必须写成：
@media (hover: hover) and (pointer: fine) {
.btn:hover {
background-color: #007bff;
transition: background-color 0.2s;
}
}
否则规则会被跳过，或者在不该生效的时候生效。
:active 在 iOS Safari 上为什么点了没反应
:active 是移动端最稳的瞬时反馈替代方案，但它在 iOS Safari 默认被禁用——除非元素被识别为“可交互目标”。满足以下任一条件才生效：
- 元素或任意祖先绑定了
touchstart事件（最简写法：） - 元素是
<button></button>，或带role="button"且有tabindex="0" -
cursor: pointer对移动端无效，别指望它起作用
另外，:active 动画建议 ≤ 0.15s；只改背景色感知弱，推荐组合 transform: scale(0.98) + opacity: 0.9；若父容器设了 overflow: hidden，缩放可能被裁掉。
真正难的从来不是怎么写对，而是得同时兼顾三件事：媒体查询顺序、可交互标记、以及 touch 事件生命周期里那些没触发的 touchend 和 touchcancel。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
