移动端:hover点击后“卡住”是规范行为，因触摸设备无移出逻辑；应使用@media (hover: hover) and (pointer: fine)包裹:hover样式，并配以:active反馈和cursor:pointer等可点击标记。
移动端 :hover 状态点击后“卡住”不是 bug，是规范行为 —— 它根本没设计“移出”逻辑，只把第一次触摸当 hover 入口，之后不重置。 用 @media (hover: hover) 包裹 :hover 样式是最直接、最可靠的解法，但必须搭配 pointer: fine 和 :active 才算完整闭环。
为什么单独用 @media (hover: hover) 还会出问题
Surface Pro、三星 S22、iPad（接妙控板时）等设备会同时报告 hover: hover 和 pointer: coarse。浏览器照单全收，导致你写的 .menu:hover { display: block; } 在手指点一下后就“卡开”，再点别处也不收。
-
@media (hover: hover)只回答“设备是否支持悬停”，不回答“此刻是不是鼠标在操作” - 必须叠加
and (pointer: fine)，才能确保只对鼠标、触控笔生效，排除手指和触控板粗粒度场景 - 别写
@media (hover: hover) and (pointer: coarse)—— 规范里这两者互斥，这条永远不匹配 - iOS Safari 某些版本会硬编码
hover: hover为 true，哪怕你正用手指点，也骗不过它
@media (hover: hover) and (pointer: fine) 的实操写法
这条规则要包裹整个 hover 动效链，包括 transition 属性本身，否则移动 Safari 可能解析到 transition，导致 Vue/React 组件重渲染时意外抖动。
- 把
transition明确写进媒体查询块内，不要放在基础类里 - 禁用
transition: all，只列需要过渡的属性，比如transform、box-shadow - 示例写法：
@media (hover: hover) and (pointer: fine) {
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
}
注意：这个规则不影响 :focus，键盘导航仍需单独保留 focus 样式。
移动端点击必须有 :active 替代反馈
禁用 :hover 不等于完成响应式 —— 用户点下去没视觉变化，会怀疑没点中。这时候 :active 就是瞬时反馈替代方案。
- iOS Safari 默认不触发
:active，除非元素或其祖先有cursor: pointer或绑定了touchstart事件；最简做法是给 -
:active动画持续时间建议 ≤ 0.15s，避免点击后延迟感明显 - 别用
!important强行覆盖:hover，而是让:active自身定义完整状态（背景、缩放、边框等） - 可点击性标记不能少：确保元素有
cursor: pointer或tabindex="0"，否则伪类压根不会触发
容易被忽略的兼容与细节
@media (hover: hover) 在 iOS Safari 9.3+、Android Chrome 52+、Edge 12+ 支持，IE 完全不支持；@media (hover: hover) and (pointer: fine) 要求 iOS Safari 13.4+、Chrome 82+，老版本需 fallback。
- 别用
@media (any-hover: hover)做功能开关 —— 它只要设备“有任一可悬停输入方式”就命中，连蓝牙鼠标、手写笔都算，误触率极高 - 别信 UA 判断或屏幕尺寸猜设备类型，
hover和pointer媒体查询才是浏览器原生能力探测 - 过渡动画时间太长（>0.2s）在移动端会放大“点击无反馈”的错觉，尤其在快速连点时
- JS 模拟 hover 风险高：触摸穿透、滚动干扰、内存泄漏 —— 除非真需要链式动画，否则绕开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
