移动端 hover 并非失效，而是因触摸设备默认仅在支持可靠悬停（hover: hover）时触发；应使用@media (hover: hover)包裹hover样式和transition，避免误用于触屏设备。
移动端为什么 hover 会“失效”或误触发
在 iOS Safari 和部分安卓浏览器中，:hover 不是真正被“禁用”，而是被延迟触发或仅在模拟鼠标指针（如 iPad 的触控笔悬停）时生效。更常见的情况是：用户轻点卡片后，:hover 样式短暂出现，接着页面跳转或焦点丢失，造成“闪烁”或“卡住”。这不是 bug，而是触摸设备对 hover 的兼容策略——它默认只在有明确指针设备（hover: hover）时才启用 hover 行为。
用 @media (hover: hover) 安全启用 hover 特效
现代 CSS 提供了 @media (hover: hover) 媒体查询，它能精准识别当前设备是否支持可靠 hover（即有鼠标/触控板），而非依赖屏幕宽度。这是比单纯查 max-width 更语义化、更健壮的方案。
实操建议：
- 把所有 hover 相关样式（如
transform、box-shadow、transition）包裹进该媒体查询内 - 基础卡片样式（无 hover 状态）始终生效，保证移动端默认体验不降级
- 避免在
@media (hover: none)中写覆盖逻辑——它不可靠，且多数现代浏览器不报告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 存在**——比如 Surface Pro 同时满足 pointer: coarse 和 hover: hover。若仅凭 pointer: coarse 移除 hover，会在二合一设备上误伤真实鼠标场景。
正确做法是组合判断：
- 优先用
@media (hover: hover)控制 hover 动效 - 用
@media (pointer: coarse)单独优化点击区域（如增大padding）、禁用:focus-visible的 outline 等 - 两者互不替代，也不嵌套使用
过渡动画在移动 Safari 中的兼容细节
即使 hover 被禁用，transition 属性本身仍可能被解析，导致意外动画（尤其在 Vue/React 组件重渲染时）。为彻底规避：
- 把
transition也写进@media (hover: hover)块内，而非卡片基础类中 - 避免使用
transition: all，明确列出需过渡的属性（如transition: transform 0.2s, box-shadow 0.2s） - 在 iOS 上，
transform: translateY()比top性能更好，且不会触发重排
复杂点在于：有些安卓 WebView 会忽略 (hover: hover)，但这类环境通常已默认禁用 hover，实际影响有限。真正要盯住的是 iPad + 外接键盘/鼠标这种混合输入场景——那里才是 hover 行为最易出错的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
