仅用@media (hover: hover)会误判Surface Pro等二合一设备，因其同时满足hover: hover和pointer: coarse；正确写法是@media (hover: hover) and (pointer: fine)，确保仅对鼠标、触控笔等精细输入生效。
为什么只用 @media (hover: hover) 会误判 Surface Pro 这类设备
Surface Pro、MacBook 触控板等二合一设备既支持鼠标/触控板（hover: hover 为 true），又支持手指触摸（pointer: coarse）。单靠 @media (hover: hover) 会让这些设备无差别启用 hover 动效，结果用户用手指点一下菜单就“卡住”在悬停态，再点别处也不退——这不是 bug，是浏览器把首次触摸当作了 hover 入口，却没触发退出逻辑。
真正需要的不是“有没有悬停能力”，而是“当前交互是否由精细指针发起”。所以必须叠加判断输入精度：
-
@media (hover: hover) and (pointer: fine)才是安全守门员：仅对鼠标、触控笔生效，自动排除所有纯触摸或粗粒度输入场景 - 不要写成
@media (hover: hover) and (pointer: coarse)—— 这条永远不匹配，因为hover: hover和pointer: coarse在同一设备上互斥 - 旧版 iOS Safari（hover 媒体特性，整块 CSS 会被跳过，得留降级样式
@media (pointer: coarse) 不是用来禁用 hover 的
常见错误是看到文档里说“pointer: coarse 表示触屏”，就直接用它包裹 .card:hover { ... } 并设为 display: none。这会导致 Surface Pro 接着鼠标时也失去悬停效果——因为它的 pointer 特性会随输入方式动态切换，但媒体查询只在页面加载时计算一次。
正确做法是把它和 hover 解耦，各自承担明确职责：
-
@media (hover: hover) and (pointer: fine)：只放动效、位移、阴影等纯视觉增强，不参与功能逻辑 -
@media (pointer: coarse)：单独优化触屏体验，比如增大点击热区、调整 focus outline 尺寸、禁用拖拽手柄 - 两者可共存，但不能混用——例如不要写
@media (hover: hover), (pointer: coarse)，这是“或”逻辑，反而扩大了误触发范围
移动端必须补 :active，且不能只靠它
删掉 hover 样式后直接上 :active，看似简单，但在 iOS Safari 上默认不生效——它要求元素有 cursor: pointer 或 tabindex="0" 才承认这是可交互目标。
实操建议：
- 给所有带 hover 效果的按钮、卡片加
cursor: pointer（哪怕只是装饰性元素） -
:active样式要和默认态保持视觉连贯，避免“闪一下变色又弹回”的跳变感 - 别用
!important强行覆盖 hover，而是把:active规则写在媒体查询块之后，靠顺序优先级胜出 - 如果需要更长反馈（比如按住 200ms 才触发），就得用 JS 监听
touchstart+setTimeout模拟，:active只适合瞬时响应
框架里 hover 工具类可能已封装，但得确认构建配置
Tailwind CSS v3.3+、Bootstrap 5.3+ 默认把 hover: 类包裹进 @media (hover: hover) and (pointer: fine)，但前提是你的构建流程没关掉 prefers-reduced-motion 或 hover 特性检测。
检查方法很简单：
- 打开 DevTools → Elements → 找一个用了
hover:bg-blue-500的元素 - 看 Computed 面板里对应背景色是否被
@media规则包裹；如果没有，说明 PostCSS 插件没启用或配置漏了corePlugins: ['hover'] - 自定义主题或 purgeCSS 配置不当也可能把整个媒体查询块删掉，尤其当 class 名是动态拼接时
最易被忽略的一点：媒体查询块必须写在常规样式之后，否则即使匹配成功，也会被前面的通用规则覆盖。顺序错了，再精准的条件也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
