移动端:hover“卡住”是因浏览器缺乏退出机制，ios safari和android chrome将touchstart当作mouseover但无mouseout清除；需用@media (hover: hover) and (pointer: fine)精准判断，配合:active优化或js模拟is-hovered类并处理touchend延迟与preventdefault。
移动端 :hover 样式“卡住”不是 bug，是浏览器没设计退出机制
iOS Safari 和 Android Chrome 会把第一次 touchstart 当作 mouseover 触发 :hover，但没有对应的 mouseout 事件来清除它。滚动、切页、点空白处可能清掉，但不保证——真机上点完按钮背景色还挂着，就是这个原因。
常见错误现象包括：
- 下拉菜单点一下就展开又瞬间收起
- 按钮点击后
background-color残留数秒才消失 - 同一页面多个可悬停元素，点一个后其他
: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 不是万能替代，iOS Safari 默认不生效
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合，但它在 iOS Safari 默认不生效。
要让它工作，元素或其祖先必须满足以下任一条件：
- 设置了
cursor: pointer（注意：纯 CSS 声明在移动端被忽略，无效） - 绑定了
touchstart事件（最简做法：） - 元素本身是
<button></button>或带role="button"且有tabindex
另外，:active 动画持续时间建议 ≤ 0.15s；不要只改背景色，组合缩放 + opacity 微调更可靠；父容器若设了 overflow: hidden，可能裁掉缩放区域。
用 JavaScript 模拟 is-hovered 类时最容易漏掉的三件事
用 touchstart 添加 is-hovered 类看似简单，但实操中常踩坑：
- 必须调用
e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除 class——用户滑动时touchend不一定触发，推荐用setTimeout延迟 300ms 清除 - 如果元素有跳转行为（如
<a href></a>），要在click回调里立即清除is-hovered，否则新页面样式被污染
真正难的从来不是怎么写 :hover，而是怎么让它的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，藏在 touchcancel 的监听里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
