CSS 的 :hover 在触屏设备上不可靠，因其依赖指针移入事件而触屏无持续悬停状态；应使用 @media (hover: hover) 媒体查询精准判断设备是否支持 hover，并搭配 :focus 和 :active 保障触屏体验。
hover 在触屏设备上根本不会触发
CSS 的 :hover 是鼠标悬停伪类，依赖「指针移入」事件；而 iOS/Android 等主流触屏设备没有持续的 hover 状态，轻点即触发 click，系统会模拟一次 mouseenter + mouseleave（仅 Safari 旧版有短暂延迟），但不会维持 hover 样式。所以你在 iPhone 上“长按”按钮，大概率看不到 :hover 效果——这不是你写错了，是浏览器刻意不支持。
常见错误现象：
– 开发时在 Chrome 桌面模式调好 :hover，切到真机预览发现完全没反应
– 给按钮加了 :hover { opacity: 0.8; }，触屏用户点击时毫无视觉反馈
- 不要用
:hover做核心交互反馈（比如展开菜单、显示工具提示），它在移动端不可靠 - 如果必须保留 hover 样式，只用于桌面端增强体验，且要搭配
:focus和:active覆盖触屏场景 - Safari on iOS 15.4+ 对
:hover做了更严格的限制：只有启用了「辅助功能 > 触控调节 > 指针控制」的设备才可能触发，普通用户默认关闭
用 @media (hover: hover) 精准隔离桌面悬停逻辑
这是目前最干净的方案：用媒体查询判断设备是否真正支持 hover，而不是靠 UA 或屏幕尺寸猜。它返回 hover: hover（支持）或 hover: none（不支持），和 touch-capable 并不等价——比如带触摸屏的 Windows 笔记本，hover: hover 仍为 true，此时可以安全用 :hover。
使用场景：
– 侧边栏导航项需要 hover 展开子菜单（桌面） vs 点击展开（触屏）
– 卡片组件在桌面显示阴影+缩放，触屏则保持静态
立即学习“前端免费学习笔记（深入）”；
button {
background: #333;
}
@media (hover: hover) {
button:hover {
background: #555;
transform: scale(1.02);
}
}
@media (hover: none) {
button:active {
background: #444;
}
}
-
@media (hover: hover)兼容 Chrome 41+、Firefox 37+、Safari 9+、Edge 12+ - 不要写成
@media (hover)—— 这是无效语法，必须带值 - 它无法检测“当前是否正用鼠标操作”，只反映设备能力，所以插着鼠标用 iPad 也不会激活 hover 分支
触屏设备上替代 hover 的真实可行方案
别试图“修复” hover，而是换一套反馈逻辑。触屏用户的预期是：点击即响应，有即时视觉变化。用 :active 最直接，但它只在按下瞬间生效，松手就消失——对长按或误触不友好。更稳妥的是结合 JavaScript 监听 touchstart + touchend 手动加 class，或用 focus-visible 配合键盘导航。
参数差异：:active 无兼容问题，但持续时间极短；:focus 在触屏上默认不触发（除非元素可聚焦且被 tap）；:focus-visible 只在键盘操作时生效，避免鼠标用户看到多余焦点框
- 纯 CSS 方案：给按钮加
tabindex="0"，再写button:focus { outline: 2px solid #007aff; }，tap 后会获得焦点并保持样式 - 轻量 JS 方案：监听
touchstart时加is-pressedclass，touchend/touchcancel时移除，对应写.btn.is-pressed { opacity: 0.7; } - 性能注意：避免在
touchmove中频繁操作 class，容易卡顿；优先用will-change: opacity提升合成层
为什么不用 pointer: coarse 判断触屏？
@media (pointer: coarse) 表示输入机制精度低（如手指），但它和 hover 能力不是互斥关系。Windows 二合一设备、Surface Pro 插着鼠标时，pointer: coarse 仍为 true（因为屏幕支持触摸），但 hover: hover 也是 true——此时你若只按 coarse 关闭 hover 样式，反而破坏鼠标用户的体验。
错误现象：
– 写了 @media (pointer: coarse) { button:hover { display: none; } }，结果 Surface 用户插着鼠标也看不到 hover 效果
– 误以为 coarse == “当前正在用手指操作”，其实它只是描述硬件能力
-
pointer: coarse适合调整点击区域大小（如把min-height: 24px改成48px），不适合控制交互逻辑分支 - 真正需要区分的是“能否可靠维持 hover 状态”，答案只在
(hover: hover)里 - 如果还要兼容老浏览器（IE、UC），只能降级为 UA 检测 +
ontouchstart，但会漏掉某些 hybrid 设备
复杂点在于：同一个页面里，你得同时考虑鼠标悬停、触屏点击、键盘 tab 导航、甚至语音控制（会触发 focus）。hover 只是其中一环，不能把它当默认，也不能彻底抛弃——关键是让每种输入方式都有符合直觉的反馈，而不是强行统一成一种行为。
