触屏设备无真正悬停，:hover为模拟行为；iOS/Android首次触摸后短暂触发即退出，导致菜单闪现；需用@media (hover: hover) and (pointer: fine)精准匹配精细输入设备；:active需绑定touchstart或使用button元素才生效，推荐≤0.15s的scale+opacity反馈。
因为浏览器在触屏设备上根本不存在真正的悬停状态，所有:hover表现都是模拟出来的兼容行为，不是bug，是设计如此。
为什么点一下菜单就闪开又收起
iOS Safari 和 Android Chrome 会在首次 touchstart 后“模拟一次 hover”，紧接着就退出——它没有“手指悬停”这个物理输入，所以无法维持状态。结果就是你点按钮，.menu:hover { display: block; } 刚生效就失效，视觉上就是闪一下。
- 这不是样式写错了，也不是 selector 权重不够
- 原生
<button></button>更难控制，因为它自带高亮逻辑，和 CSS:hover并行运行 - 微信/QQ 内置浏览器（X5 内核）甚至完全忽略
:hover状态更新，残留更顽固
@media (hover: hover) 单独用等于没写
这个媒体查询只回答“设备是否支持悬停能力”，不回答“此刻是不是鼠标在操作”。iPad 连妙控板、Surface Pro 插触控笔时，会同时上报 hover: hover 和 pointer: coarse，导致你写的规则在手指点击后就意外触发。
- 必须写成
@media (hover: hover) and (pointer: fine)，才能精准匹配鼠标/触控笔等精细输入设备 -
@media (hover: hover) and (pointer: coarse)是无效组合，W3C 规范里二者互斥，永远不匹配 - transition 属性也得包进同一媒体查询里，否则移动 Safari 可能解析到动画但不触发
: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.8。
JS 模拟 is-hovered 类最容易漏掉三件事
用 ontouchstart 添加类看似简单，但真机上常出问题：
- 必须调用
e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除 class——用户滑动时touchend不一定触发，推荐用setTimeout延迟 300ms 清除 - 如果元素有跳转行为（如
<a href></a>），要在click回调里立即清除is-hovered，否则新页面样式被污染
真正难的从来不是怎么写 :hover，而是怎么让它的边界在不同输入方式之间自然消失——它藏在 pointer: fine 的判定里，也藏在你忘了给父容器加 will-change: transform 的那一行注释里。
