:hover在移动端不自动退出是因触摸设备无悬停概念，浏览器仅模拟一次且不触发mouseout；需用@media (hover: hover) and (pointer: fine)精确控制，并配合:active唤醒与js合理模拟。
因为移动端没有“鼠标移出”这个事件，:hover 在触摸设备上根本不会自动退出——它被浏览器当作一次临时模拟状态触发后，就卡在那里了。
为什么 :hover 在真机上点完不退色
iOS Safari 和 Android Chrome 会把第一次 touchstart 当作 mouseover 来触发 :hover，但压根不发 mouseout。滚动、切页、点空白处可能清掉，但不保证。结果就是按钮点完背景还挂着，下拉菜单展开又秒收。
- 这不是 bug，是规范允许的行为：W3C 明确说 UA 可以在触摸设备上弱化或忽略
:hover -
:hover在移动端没有物理锚点——手指没“悬停”这回事，只有“按”和“松” - 部分内核（如旧版 X5）甚至直接忽略整个
:hover规则，连模拟都不做
@media (hover: hover) and (pointer: fine) 必须这么写
单独写 @media (hover: hover) 在 iPad 或 Surface 上恒为 true，完全不可靠；漏掉 and (pointer: fine) 就等于没写。
- 必须带值：
(hover: hover)表示“支持悬停”，(pointer: fine)表示“主输入是鼠标/触控笔”，两者同时满足才算真悬停 - 必须放在常规样式之后，否则
.btn:hover会直接覆盖媒体查询里的定义 -
transition也得包进去，否则移动 Safari 可能解析到却不用 - 别写
@media (hover: hover) and (pointer: coarse)——W3C 规范里这两者互斥，永远不匹配
:active 在 iOS Safari 默认不生效
:active 是最接近移动端“按下反馈”的伪类，但它在 iOS Safari 里默认被禁用，除非你主动“唤醒”它。
- 唤醒条件（满足任一即可）：
、元素是<button></button>、或带role="button"+tabindex -
cursor: pointer纯 CSS 声明在移动端无效，别依赖 -
:active动画持续时间建议 ≤0.15s，避免点击后有延迟感 - 别用
!important覆盖:hover，而是让:active自身定义完整状态（背景 + 缩放 + 边框）
JS 模拟 is-hovered 类时最容易漏的三件事
手动加 class 看似简单，但实操中几乎必踩坑。
- 必须调用
e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除 class——用户滑动时touchend不一定触发，推荐用setTimeout延迟 300ms 清除 - 如果元素有跳转行为（如
<a href></a>），要在click回调里立即清除is-hovered，否则新页面样式被污染
真正难的不是怎么写 :hover，而是怎么让它在鼠标和手指之间自然消失——它藏在 pointer: fine 的判定里，藏在 touchcancel 的监听里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
