移动端:hover卡住是因浏览器无悬停结束事件，仅首次touchstart模拟:hover；修复方案为添加ontouchstart=""并配合:active反馈。
移动端点击后 :hover 样式卡住不退，不是你 CSS 写错了，而是浏览器压根没有“悬停结束”这个事件 —— 它只在首次 touchstart 时模拟一次 :hover，之后既不持续，也不自动清除。
为什么 :hover 在 iOS Safari 和安卓 Chrome 里会“锁住”
移动端没有鼠标移入/移出的物理行为。iOS Safari 和多数安卓 Chrome 会把第一次触摸当作 mouseover 触发 :hover，但没对应事件来重置它。结果就是：点完按钮，背景色、阴影、缩放还挂着；滚动或切页后才可能顺带清掉。微信 X5 内核更极端——整段 @media (hover: hover) 直接忽略，规则不生效。
@media (hover: hover) and (pointer: fine) 怎么写才真正起作用
这个媒体查询不是判断有没有触摸屏，而是确认“当前主输入设备支持精细悬停（比如鼠标/触控板）”。它必须满足三个硬条件：
- 写全值：
@media (hover: hover) and (pointer: fine)，不能简写成@media (hover)，否则整条规则被浏览器无视 - 顺序要靠后：必须放在常规
.btn:hover样式块之后，否则会被普通 hover 覆盖 - 仅作渐进增强：里面只放动效相关声明（
transform、box-shadow、transition），基础状态样式（如默认背景、边框）得始终生效
兼容性上，iOS Safari 9.3+、Chrome 52+ 支持，IE 全挂，X5 内核基本不认。
不加 JS 的最轻量修复：给元素加 ontouchstart=""
这是目前兼容性最好、侵入性最小的方案。只要在目标元素或其祖先（比如 ）上加这个空属性，绝大多数浏览器（含 iOS Safari、主流安卓 Chrome）就会主动放弃维护该元素的 hover 状态栈。
- 它不触发任何 JS 执行，纯 DOM 层面的信号
- 比全局监听
touchstart更省资源，也不用担心内存泄漏 - 对
<button></button>、<a></a>、带cursor: pointer或tabindex="0"的<div> 都有效 <li>注意别写成 <code>ontouchstart="void(0)"或带函数调用，空字符串即可 -
:active在手指按下瞬间触发、松开即失效，行为接近 PC 端的:hover + :active组合 - iOS Safari 默认不触发
:active，除非元素或其祖先有cursor: pointer或绑定了touchstart事件（就能解决） - 动画时间建议 ≤ 0.15s，比如
transform: scale(0.98); opacity: 0.9;，避免点击后延迟感明显 - 别用
!important去覆盖:hover，而是让:active自身定义完整状态（背景、缩放、边框等）
必须补上 :active，否则用户根本不知道自己点中了
禁用 :hover 不等于完成响应式 —— 移动端用户点了没反馈，会反复戳。这时候 :active 就是底线级的瞬时反馈替代方案：
真正容易被忽略的是可点击性标记：即使写了媒体查询和 :active，如果元素没被浏览器识别为“可交互目标”，这些伪类依然不会触发。确保它有 cursor: pointer 或 tabindex="0"，且父容器没设 pointer-events: none 或 overflow: hidden（后者会裁剪 transform 效果）。
