:hover在移动端点完不消失不是CSS错误，而是浏览器将首次touchstart视为mouseover却无对应mouseout事件来清除，需滚动或点击空白处等外部动作被动重置。
为什么:hover在移动端点完不消失
这不是 CSS 写错了，而是浏览器根本没打算“清除”它。iOS Safari 和 Android Chrome 会把第一次 touchstart 当作 mouseover 触发 :hover，但没有对应的 mouseout 或“手指移开”事件来终结——它卡在那里，等滚动、切页、点空白处这类外部动作来被动重置。
典型表现包括：按钮背景色挂着几秒才退；返回上一页后链接仍高亮；下拉菜单点一下就展开又瞬间收起。
- 原生
<button>更难控制，因自带高亮逻辑，和:hover并行运行 - 微信/QQ 内置浏览器（X5 内核）甚至完全忽略
:hover状态更新 -
:active在 iOS Safari 默认不生效，除非满足特定条件（见下文）
:active 是最稳的瞬时反馈替代方案
:active 在手指按下瞬间触发、松开即失效，行为接近 PC 端的 :hover + :active 组合，但它在 iOS Safari 默认被禁用。
必须满足以下任一条件才能激活：
立即学习“前端免费学习笔记（深入）”；
- 元素或其任意祖先绑定了
touchstart事件（最简写法：<body ontouchstart="">） - 元素是
<button>，或带role="button"且tabindex="0" -
cursor: pointer在移动端纯 CSS 声明无效，别依赖它
:active 动画建议持续时间 ≤ 0.15s，避免点击后有明显延迟感；别用 !important 强行覆盖 :hover，而是让 :active 自身定义完整状态（背景、缩放、边框等）。
@media (hover: hover) and (pointer: fine) 必须这么写
单独写 @media (hover: hover) 在 iPad、Surface 上恒为 true，完全不可靠；@media (hover)(缺值) 整条规则会被浏览器忽略。
必须写成：
@media (hover: hover) and (pointer: fine) {
.btn:hover {
background-color: #eee;
transition: background-color 0.2s;
}
}
注意三点：
- 这条规则必须放在常规样式（如
.btn:hover）之后，否则会被直接覆盖 -
transition属性也得包进去，否则移动 Safari 可能解析到却不用 - 别写
@media (hover: hover) and (pointer: coarse)——W3C 规范里二者互斥，永远不匹配
JS 模拟 is-hovered 类容易踩的坑
监听 touchstart/touchend 手动切换 class 看似灵活，实操中极易出问题：
-
触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加 -
滚动干扰：页面滚动时触发
touchstart，误判为点击，样式异常激活 - 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
若非要用，至少在 touchend 后加 setTimeout(() => el.classList.remove('is-hovered'), 0)，并确保每次绑定前先 removeEventListener。
真正卡住人的永远是上下文，不是 :hover 本身——你写的 hover:-translate-y-1 没反应，90% 的概率不是 Tailwind 问题，而是父容器设了 overflow: hidden 把位移剪掉了。
