:hover在移动端“粘住”是因浏览器将touchstart视为悬停起点却无对应结束事件；需用@media (hover: hover) and (pointer: fine)精准识别精细指针设备，并配合:active或JS模拟实现可靠交互。
为什么:hover在移动端会“粘住”不退
这不是 bug，是浏览器对悬停状态的延迟清除机制——iOS Safari 和部分 Android Chrome 把首次 touchstart 当作 :hover 的起点，但没有对应的“手指移开”事件来终结它。它依赖滚动、焦点切换或点击其他区域才重置，而这些动作并不总发生。你看到的按钮背景色卡着、下拉菜单点一下就展开不收，基本都是这个原因。
@media (hover: hover) and (pointer: fine) 必须这么写
单独用 @media (hover: hover) 在 iPad 或 Surface 上恒为 true，完全不可靠；@media (any-hover: hover) 更糟，连插着蓝牙鼠标的手机都算进来。真正能筛出“真鼠标/触控笔”的唯一组合是：
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}
注意三点：
• 这条规则必须放在常规样式之后，否则会被未包裹的 .card:hover 直接覆盖
立即学习“前端免费学习笔记（深入）”；
• transition 属性也得包进去，否则 Safari 可能解析到动画却无法触发 hover
• 别写 @media (hover: hover) and (pointer: coarse)，W3C 规范里这两者互斥，永远不匹配
:active 是移动端最稳的瞬时反馈替代方案
:active 在 iOS Safari 默认不生效，除非满足以下任一条件：
• 元素或其任意祖先绑定了 touchstart 事件（最简做法：<body ontouchstart="">）
• 元素是 <button> 或带 role="button" 且有 tabindex="0"
• cursor: pointer 在移动端纯 CSS 声明无效，别指望它起作用
另外：:active 动画建议 ≤ 0.15s；只改背景色太单薄，推荐组合 transform: scale(0.98) + opacity: 0.9；父容器若设了 overflow: hidden，可能裁掉缩放区域。
JS 模拟 is-hovered 类时最容易漏掉的三件事
监听 touchstart/touchend 手动切 class 看似灵活，但实操中常踩坑：
• 滚动干扰：页面滚动时触发 touchstart，误判为点击，样式异常激活
• 状态残留：快速连点多个元素，前一个的 is-hovered 类可能没清除就重复添加
• 内存泄漏：单页应用中组件反复挂载/卸载，没做事件清理就会累积监听器
更稳妥的做法是用事件委托，在父容器监听 touchstart，靠 event.target.matches('[data-hoverable]') 判断目标；移除时用 setTimeout(() => el.classList.remove('is-hovered'), 300)，避开 iOS 的 300ms click 延迟窗口；同时监听 touchcancel 防止滑动中断后状态卡死。
:hover，而是怎么让它的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，藏在 touchcancel 的监听里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。 
