移动端无悬停动作，:hover 在触屏设备上不按预期触发是设计逻辑不同而非 bug；应通过@media (any-hover: hover)精准控制、touchstart激活iOS伪类、pointer-events: none解决伪元素遮挡，并避免依赖hover实现核心交互。
移动端没有“悬停”这个动作，所以原生的 :hover 在触屏设备上不会按预期触发——这不是 bug，是设计逻辑不同。iOS 和 Android 浏览器对 :hover 的处理方式各异，有的延迟响应、有的只在点击后保留状态、有的干脆忽略。关键不是“修复 hover”，而是用适配触屏的方式替代它。
用媒体查询精准控制 hover 生效范围
现代 CSS 提供了 @media (any-hover: hover)，能识别设备是否支持真正的悬停能力。只在支持 hover 的设备（如带鼠标/触控板的 iPadOS、桌面浏览器）启用 hover 样式：
.btn {
background: #ccc;
}
@media (any-hover: hover) {
.btn:hover {
background: #007bff;
}
}这样既保留桌面体验，又彻底规避移动端误触发或残留样式的问题。
iOS 上 click 延迟或需双击？加 touchstart 激活伪类
iOS Safari 默认将首次触摸视为“模拟 hover”，导致 :active 或链接 :hover 不生效，甚至需要双击才触发 click。一个轻量级解法是在 <html> 或 <body> 上绑定一次空的 touchstart 事件：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.addEventListener('touchstart', function() {}, { passive: true });这会提前激活 iOS 的“激活态”机制，让 :active 和部分 :hover 行为回归正常。Vue/React 项目中建议在根组件 mounted 或 useEffect 中执行。
伪元素遮挡导致 hover 失效
如果 hover 样式写了但完全没反应，检查是否有 ::before 或 ::after 伪元素覆盖在目标元素上方，且未设置交互穿透：
- 默认情况下，伪元素会拦截指针事件
- 加上
pointer-events: none;即可透传触摸/点击 - 同时确保
z-index不意外盖住主体内容
.card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; /* 关键 */
}别依赖 hover 实现核心交互
移动端用户不悬停，只点击、滑动、长按。把 hover 当作增强体验可以，但不能作为功能入口：
- 按钮的点击态应由
:active或 JS 添加的 class 控制 - 下拉菜单、工具提示等必须有明确的 tap 触发逻辑
- 动画反馈优先使用
tap-activeclass + transition，而非纯 CSS hover
真正可靠的交互，永远建立在明确的用户动作之上，而不是悬停这种桌面隐喻。
