移动端:hover点击后“卡住”不是bug，而是浏览器对悬停状态的延迟清除机制——它只将首次触摸视为入口，无主动退出逻辑；ios safari和android chrome将touchstart当作mouseover触发:hover，但缺乏对应mouseout事件来终结，导致样式残留。
移动端 :hover 点击后“卡住”不是 bug，是浏览器对悬停状态的延迟清除机制——它根本没设计“退出”逻辑，只把第一次触摸当入口，之后不主动重置。
为什么 :hover 在触摸后不自动退场
iOS Safari 和 Android Chrome 会把首次 touchstart 当作 mouseover 触发 :hover，但没有对应的 mouseout 或 “手指移开”事件来终结它。滚动、切页、点空白处可能清掉，但不保证——真机上按钮背景色挂着几秒才消失，就是这个原因。
- 下拉菜单点一下就展开又瞬间收起
- 同一页面多个可悬停元素，点一个后其他
:hover样式也异常激活 - 返回上一页后，链接仍保持
:hover高亮
@media (hover: hover) and (pointer: fine) 必须这么写
单独写 @media (hover: hover) 在 iPad、Surface 上恒为 true，完全不可靠；@media (hover)（缺值）整条规则会被浏览器忽略。
- 必须带值：
@media (hover: hover) and (pointer: fine)才表示“当前主输入是精细指针（鼠标/触控笔），且支持悬停” - 必须放在常规样式之后，否则会被
.btn:hover直接覆盖 -
transition属性也要包进去，否则移动 Safari 可能解析到却不用 - 别写
@media (hover: hover) and (pointer: coarse)——W3C 规范里这两者互斥，永远不匹配
:active 是最稳的触摸反馈替代方案
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合，但它在 iOS Safari 默认不生效。
- 需满足任一条件才能激活：
cursor: pointer（纯 CSS 声明在移动端被忽略）、绑定touchstart事件、或元素是<button></button>/ 有role="button"且tabindex="0" - 最简做法：
-
:active动画持续时间建议 ≤0.15s，避免点击后有明显延迟感 - 别用
!important强行覆盖:hover，而是让:active自身定义完整状态（背景、缩放、边框等）
JS 模拟 is-hovered 类容易踩的坑
监听 touchstart/touchend 手动切 class 看似灵活，实操中极易出问题：
- 触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加 - 滚动干扰：页面滚动时触发
touchstart，误判为点击，样式异常激活 - 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
- 若非要用，至少在
touchend后加setTimeout(() => el.classList.remove('is-hovered'), 0)，避开 iOS 的 300ms click 延迟窗口
真正容易被忽略的是：即使写了 @media (hover: hover) and (pointer: fine) 和 :active，如果元素没被浏览器识别为“可交互”，这些伪类依然不会触发——确保它有 cursor: pointer 或 tabindex="0"，且父容器不能包裹整个视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
