触摸屏上:hover“卡住”是因设备上报hover: hover为true但实际输入为pointer: coarse，需用@media (hover: hover) and (pointer: fine)精准判断真悬停，并配合:active替代反馈与JS模拟is-hovered类的防坑处理。
为什么触摸屏上:hover总“卡住”或不触发
不是浏览器坏了，也不是你写错了选择器——iOS Safari 和 Android Chrome 会把首次触摸当成一次“模拟悬停”，然后立刻退出，导致下拉菜单闪一下就收、按钮高亮只闪半秒。根本原因是设备上报 hover: hover 为 true（为了兼容旧站），但实际输入是手指这种 pointer: coarse 类型，CSS 却没能力区分“真悬停”和“假悬停”。
@media (hover: hover) and (pointer: fine) 是唯一靠谱的守门员
单独用 @media (hover: hover) 在 iPad 或 Surface 上恒为 true，完全不可靠；@media (any-hover: hover) 更糟，连蓝牙鼠标都算进来。必须叠加指针精度判断：
-
@media (hover: hover) and (pointer: fine)才表示“当前主输入方式既支持悬停，又足够精细”——即鼠标、触控笔，自动排除所有手指触控 - transition 属性也得包进这个媒体查询里，否则移动 Safari 可能解析到 transition 却不触发 hover，造成 Vue/React 组件重渲染时意外动画
- 别写
@media (hover: hover) and (pointer: coarse)，W3C 规范里这两者互斥，这条永远不匹配
移动端必须有:active替代反馈，且iOS Safari要手动激活
:active 在 iOS Safari 默认不生效，除非元素或其祖先满足以下任一条件：
- 设置了
cursor: pointer（注意：纯 CSS 声明在移动端被忽略，无效） - 绑定了
touchstart事件（最简做法：<body ontouchstart>） - 元素本身是
<button>或带role="button"且有tabindex
另外，:active 动画持续时间建议 ≤ 0.15s；不要只改背景色，组合缩放 + opacity 微调更可靠；父容器若设了 overflow: hidden，可能裁掉缩放区域。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
JS 模拟 is-hovered 类时最容易漏掉的三件事
用 touchstart 添加 is-hovered 类看似简单，但实操中常踩坑：
- 必须调用
e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除 class——用户滑动时touchend不一定触发，推荐用setTimeout延迟 300ms 清除 - 如果元素有跳转行为（如
<a href>），要在click回调里立即清除is-hovered，否则新页面样式被污染
真正难的从来不是怎么写 hover，而是怎么让 hover 的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，藏在 touchcancel 的监听里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。
