移动端 hover 并非失效，而是因触摸设备默认仅在支持可靠悬停（hover: hover）时触发；应使用@media (hover: hover)包裹hover样式和transition，避免误用于触屏设备。
移动端为什么 hover 会“失效”或误触发
许多前端开发者在移动端适配时都会遇到一个常见问题：卡片悬浮效果在手机上要么毫无反应，要么出现后瞬间消失。这并非 iOS Safari 或安卓浏览器主动禁用了 :hover 伪类。其根本原因在于，触摸设备对悬停交互有一套内置的兼容性策略：默认情况下，浏览器仅在检测到设备明确支持可靠的指针悬停（即 CSS 媒体特性 hover: hover）时，才会激活标准的 hover 行为。
因此，用户轻触卡片后看到的“闪烁”或“样式卡顿”现象，实际上是浏览器在尝试模拟桌面端的鼠标悬停事件，但由于缺乏持续的指针输入信号而被迫中断的结果。这是一种符合规范的设计逻辑，而非程序错误。
用 @media (hover: hover) 安全启用 hover 特效
如何专业且优雅地解决这一问题？现代 CSS 提供了语义更清晰的方案：使用 @media (hover: hover) 媒体查询。它不依赖于屏幕尺寸，而是精准判断当前设备的主要输入方式是否支持稳定的悬停操作（例如连接了鼠标或触控板）。这种方法比传统上仅用 max-width 来界定“移动端”更加健壮和未来友好。
具体实施时，请遵循以下核心优化建议：
- 将所有与悬停相关的样式（例如
transform、box-shadow以及控制动画流畅度的transition属性）都包裹在此媒体查询内部。 - 确保卡片的基础样式（即非悬停状态）在查询外部全局生效，以保障触屏设备下的默认交互体验不受影响。
- 尽量避免依赖
@media (hover: none)来编写覆盖样式，因为该特性的浏览器支持度并不完善，许多现代浏览器可能不会准确报告此状态。
@media (hover: hover) {
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
}
为什么不能只靠 pointer: coarse 判断触屏
这里存在一个广泛的技术误区：试图通过 @media (pointer: coarse) 来检测触屏设备并据此禁用 hover 效果。这种策略存在缺陷。因为 pointer: coarse 仅表明设备的主要输入机制是“粗精度”的（如手指触摸），但它并不排除该设备同时具备支持悬停的辅助输入能力。
一个典型的例子是 Surface Pro 等二合一笔记本设备。当用户使用手指触摸时，它符合 pointer: coarse 条件；但一旦连接鼠标或使用触控笔进行悬停操作时，它同样满足 hover: hover 条件。如果仅依据前者就移除所有 hover 特效，会在这种混合输入场景下损害用户体验。
因此，正确的实践是组合使用这两类媒体特性，让它们各司其职：
- 优先使用
@media (hover: hover)：专门用于控制悬停动画效果的加载与执行。 - 辅助使用
@media (pointer: coarse)：独立优化触屏下的交互细节，例如适当增大按钮点击热区、调整焦点指示框样式等。 - 牢记两者是互补协作关系，而非互相替代，通常也无需进行复杂的嵌套编写。
过渡动画在移动 Safari 中的兼容细节
优化并未结束。即使 hover 行为被正确限制，transition 属性本身仍可能被浏览器解析并应用。这可能导致在某些非悬停触发的状态变化（例如 Vue 或 React 组件因数据更新重新渲染）时，产生意料之外的动画效果。
要彻底规避此类问题，需关注以下技术细节：
- 将
transition属性的声明也一并放入@media (hover: hover)代码块内，而不是将其写在卡片的全局基础样式中。 - 避免使用性能不佳且难以控制的
transition: all简写，明确列出需要过渡的属性，例如transition: transform 0.2s, box-shadow 0.2s。 - 在 iOS 设备上，为实现位移动画，应优先采用
transform: translateY()属性。其性能远优于修改top、margin等属性，因为它不会触发昂贵的页面布局重排（Layout Reflow）。
最后需要提醒的是：最复杂的兼容性问题往往出现在混合输入场景，例如为 iPad 外接键盘和鼠标使用时。此外，部分安卓系统内置的 WebView 可能对 (hover: hover) 媒体查询支持不完整，但幸运的是，这些环境大多默认就已限制了 hover 行为，实际影响范围有限。深入测试这些边界情况，是构建出真正稳健、流畅的跨端交互效果的关键。
