:hover在触摸设备上失效，因W3C规定无指针设备可忽略该伪类；应使用@media (hover: hover)条件判断，并为触摸设备提供:active等替代反馈。
hover 在触摸设备上为什么失效
因为 hover 是鼠标悬停触发的伪类，而 iOS/Android 等触摸设备没有「悬停」这个概念——手指点下去就是激活，抬起来才结束。浏览器为了兼容，通常把第一次触摸映射为 mouseenter + mouseover，但不会持续维持 :hover 状态。结果就是：菜单弹不出来、下划线不显示、卡片不浮起，用户点完一脸懵。
这不是 bug，是规范行为。W3C 明确规定，:hover 在无指针（no-pointer）设备上可被忽略。
用 @media (hover: hover) 做条件判断
这是最干净的方案：只在真正支持 hover 的设备上启用 hover 样式。其他设备直接跳过，避免样式冲突或误触发。
-
@media (hover: hover)匹配有精细指针（如鼠标）且支持 hover 的设备（桌面 Chrome/Firefox/Safari） -
@media (hover: none)匹配触摸优先设备（iOS Safari、Android Chrome），或触控笔但无 hover 能力的场景 - 注意：
(hover: hover)在 macOS 触控板上也返回 true（因系统模拟了 hover），这是合理行为，不用强行禁用 - 别用
max-width或 UA 判断，那些会漏判 Surface Pro 模式切换、折叠屏横竖状态等真实场景
@media (hover: hover) {
.nav-item:hover {
background: #f0f0f0;
}
}
/* 触摸设备默认用 click-active 样式 */
.nav-item:active {
background: #e0e0e0;
}
触摸设备上替代 hover 的可靠交互模式
不能只删掉 hover 样式，得补上用户能感知的反馈。重点不是“看起来像 hover”，而是“点下去有确认感”。
- 优先用
:active：所有现代浏览器都支持，点击瞬间生效，无需 JS - 避免纯
:focus做视觉反馈——键盘焦点和触摸焦点行为不一致，iOS Safari 默认不给触摸元素加 focus outline - 需要展开菜单？改用
click+aria-expanded控制，而不是靠 hover 显示子菜单 - 如果必须保留 hover 效果（比如工具提示），得搭配 JS 监听
touchstart并手动加 class，同时防重复触发（300ms 内只响应一次）
容易被忽略的兼容性坑
很多团队以为加了 @media (hover: ...) 就万事大吉，其实还有几个硬伤点：
- iOS Safari 15.4+ 才完整支持
(hover: hover)，旧版会直接跳过整个媒体查询——得留降级样式（比如默认用 active 态） - Windows 触控笔记本在桌面模式下可能同时满足
(hover: hover)和触摸能力，此时 hover 有效，但用户可能用手指点，导致 hover 状态残留（悬停未结束）。解决方案：监听touchstart后主动移除所有 :hover 类 - CSS 中写
.btn:hover, .btn:focus这种组合选择器时，整条规则会被@media (hover: none)屏蔽——哪怕:focus部分本该生效。要拆开写
真正的难点不在怎么写 CSS，而在承认：hover 不是“次要交互”，它是输入方式的底层差异。适配不是打补丁，是重新设计反馈链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
