移动端不支持持续:hover，点击后样式残留是因首次触摸模拟:hover；需用@media (hover: hover) and (pointer: fine)精准匹配鼠标/触控板场景，并注意:active在ios safari的启用条件及js模拟is-hovered类的三大陷阱。
根本不是“失效”，而是移动端压根不支持持续:hover状态——你看到的“点击后样式残留”，其实是浏览器在首次触摸时模拟了一次:hover，之后就不再维护这个状态了。
为什么@media (hover: hover)单独用会出问题
这个媒体查询只判断设备“是否支持悬停能力”，不判断“当前输入方式是不是鼠标”。iPad 接妙控板、Surface 触控笔、甚至部分安卓平板都会同时上报 hover: hover 和 pointer: coarse，导致你写的 .menu:hover { display: block; } 在手指点一下后就卡开不收。
- 必须写成
@media (hover: hover) and (pointer: fine)，才能精准筛出“真鼠标/触控板”场景 - 这条规则要放在常规样式之后，否则会被未包裹的
.btn:hover直接覆盖 -
transition属性也得一起包进去，否则 Safari 可能解析了动画但不触发 hover，Vue/React 重渲染时还会意外闪动 - 别写
@media (hover: hover) and (pointer: coarse)——W3C 规范里这两者互斥，这条永远不匹配
:active在iOS Safari上默认不生效的三个硬条件
:active 是移动端最稳的瞬时反馈替代方案，但它在 iOS Safari 默认被禁用，除非满足以下任一条件：
- 元素或其任意祖先绑定了
touchstart事件（最简做法：） - 元素是
<button></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 的那一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
