@media (hover: hover) 仅声明主输入设备支持悬停，不反映真实交互方式；需与 (pointer: fine) 组合使用才能安全排除触控场景，并配合 :active 样式和 js 动态监听确保跨设备体验一致。
@media (hover: hover) 本身不能“检测是否支持悬停”，它只是告诉浏览器：“如果当前主输入设备声明支持悬停，就应用这些样式”。它不保证用户真有鼠标，也不阻止触摸误触发——关键得看你怎么用。
为什么单独写 @media (hover: hover) 很容易踩坑
这条规则在 iPad（接 Magic Keyboard）、Surface Pro、甚至 iOS Safari 13.4+ 上都恒为 true，因为系统硬编码返回 hover，和实际交互无关。结果就是：手指点一下导航菜单，.menu:hover 样式被激活，但没“移出”事件，菜单卡住不收。
- 不要把
:hover样式写在媒体查询外——否则触屏点按会短暂触发，造成闪烁或状态残留 - 不要只靠
(hover: hover)做功能开关（比如隐藏下拉箭头），它不是“设备能力判断”，而是“当前声明” - IE 完全不支持该特性，需留降级样式（如始终显示箭头图标）
@media (hover: hover) and (pointer: fine) 才是安全组合
这才是真正能过滤掉手指、触控笔（粗粒度）场景的守门员。它要求两个条件同时满足：主设备声明支持悬停 + 输入精度为 fine（即鼠标、触控板、高精度触控笔）。Surface Pro 接鼠标时匹配，仅用手时因 pointer: coarse 不匹配，自然排除误触。
- 所有悬停动效（
transform、box-shadow、transition）必须包裹进这个媒体查询里 - 伪元素动画（如
.card:hover::before）也要包进去，否则 Vue/React 组件重渲染可能意外触发 - 别写成
@media (hover: hover), (pointer: fine)——这是“或”逻辑，反而扩大匹配范围
移动端点击反馈不能只靠 hover 关闭
禁用 hover 样式不等于解决“点了没反应”。用户手指按下时，需要视觉反馈，否则体验断层。
- 必须补上
:active样式（哪怕只是改背景色或加边框），它在触摸按下瞬间触发、松开即退 - 若需点击展开菜单，
@media (hover: hover) and (pointer: fine)内只放悬停逻辑；点击逻辑（如.menu-toggle）单独写在外部或用 JS 控制 - 过渡动画（
transition）也建议包进同一媒体查询——触屏设备不需要，省掉能减少渲染开销
真正难的不是写对媒体查询，而是理解它不反映“物理输入方式”，只反映浏览器当前上报的 matchMedia 状态。热插拔鼠标后，window.matchMedia('(hover: hover) and (pointer: fine)') 可能动态变化，但 CSS 不会自动重算已渲染的元素状态——这时候 JS 监听才是兜底手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
