@media (hover: hover) 单独使用会失效，因其仅声明设备支持悬停能力而非当前输入方式；需配合 (pointer: fine) 才能精准识别鼠标/触控笔操作，排除纯触控场景。
为什么@media (hover: hover)单独用会失效
它在Surface Pro、iPad（连蓝牙鼠标时）、MacBook触控板等设备上恒为true，但用户正用手指点——浏览器把首次触摸当“模拟悬停”触发一次:hover，之后不退出，导致下拉菜单卡住、按钮高亮残留。这不是bug，是规范允许的“能力声明”，而非“当前输入方式判断”。
@media (hover: hover) and (pointer: fine)才是守门员
这条媒体查询必须同时满足两个条件：hover: hover表示设备支持悬停能力，pointer: fine表示当前主输入是鼠标或触控笔（非手指）。它自动排除所有纯触控场景，包括iPhone、Android手机、未接外设的iPad。
- 必须把整个
:hover样式块包进去，包括transition属性本身——否则iOS Safari可能解析到transition却不用，造成Vue/React重渲染时意外动画 - 别写
@media (hover: hover) and (pointer: coarse)，W3C规定这两者互斥，永远不匹配 - 不要用
transition: all，明确列出要过渡的属性，比如transform、box-shadow、opacity - 这条规则不影响
:focus，键盘导航仍需保留:focus样式
移动端必须补:active，且iOS Safari要手动激活
:active不是:hover的替代品，而是触控下的瞬时反馈机制。但它在iOS Safari默认被禁用，除非满足以下任一条件：
- 元素或其任意祖先绑定了
touchstart事件（最简做法：） - 元素是
或带role="button"且有tabindex -
cursor: pointer在移动端纯CSS声明无效，不能依赖
:active动画建议≤0.15s，组合scale(0.95) + opacity: 0.8比单改背景色更可靠；若父容器设了overflow: hidden，可能裁掉缩放区域。
JS模拟is-hovered类时三个关键漏点
仅靠CSS无法处理混合输入设备（如iPad拔掉鼠标后改用手指），这时需JS兜底，但容易踩坑：
- 在
touchstart里必须调用e.preventDefault()，否则安卓部分机型会触发双击缩放或滚动中断 - 别在
touchend立即移除is-hovered类——用户滑动时touchend可能不触发，推荐用setTimeout延迟300ms清除 - 如果元素有跳转行为（如
），要在click回调里立即清除is-hovered，否则新页面样式被污染
真正难的不是写出@media (hover: hover) and (pointer: fine)，而是意识到媒体查询只在页面加载时求值一次——iPad上插拔鼠标、Surface上切换输入方式，样式不会自动更新，得靠window.matchMedia()监听+pointerdown事件做临时标记，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
