应禁用触摸设备的:hover动画，使用@media (hover: none)或(any-hover: none)精准拦截；卡片默认静态，仅在(hover: hover)且(pointer: fine)时启用transform/opacity动画；ios点击跳变需加-webkit-tap-highlight-color: transparent和touch-action: manipulation。
hover 动画在手机上乱触发怎么办
直接禁用触摸设备上的 :hover，不是靠 JS 检测 UA 或屏幕尺寸——那些都不可靠，且会漏掉平板横屏、桌面版 Chrome 开启“移动设备模拟”等场景。
真正稳定的方案是监听 pointer 类型，用 CSS 媒体查询配合 @media (hover: none) 或 @media (any-hover: none) 精准拦截。
-
@media (hover: none)表示该设备**完全不支持 hover**（如绝大多数手机、部分带触控的 Windows 笔记本） -
@media (any-hover: none)更宽松，只要存在一种输入方式不支持 hover 就命中（覆盖混合设备） - 别用
@media (max-width: 768px)—— iPad Pro 宽度超 1000px，但照样不该有 hover
CSS 卡片悬停效果如何安全降级
不要写成「默认动 + hover 覆盖」，而要反向：默认静态，只在支持 hover 的设备上启用动画。否则触摸设备首次点击时可能闪一下 hover 态（iOS Safari 尤其明显）。
典型错误写法：
card { transition: transform 0.2s; }<br>card:hover { transform: translateY(-4px); }——这会让所有设备加载过渡逻辑，且首次点击触发伪 hover。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
@media (hover: hover) and (pointer: fine) {<br> .card { transition: transform 0.2s; }<br> .card:hover { transform: translateY(-4px); }<br>} -
(pointer: fine)排除粗粒度触控（如手指），保留触控笔和鼠标，更贴近真实交互精度需求 - 动画属性尽量只用
transform和opacity，避免触发重排，否则在低端 Android 上卡顿明显
JavaScript 里怎么判断当前该不该响应 hover
纯 CSS 方案已覆盖 95% 场景，但若必须用 JS 控制（比如动态加载卡片后手动加 class），别查 navigator.userAgent 或 screen.width。
可靠方式只有两个：
- 监听
pointerdown后设一个标记，后续忽略mouseenter（但注意：iOS Safari 的pointerdown可能延迟触发，需加{ passive: true }） - 用
matchMedia实时监听：const hoverQuery = window.matchMedia('(hover: hover)');<br>if (hoverQuery.matches) { /* 启用 hover 相关逻辑 */ } - 千万别用
'ontouchstart' in window判断——Chrome 桌面版开模拟器也会返回true，误伤严重
为什么 iOS Safari 点击卡片会“跳一下”
这不是 hover 问题，是 Safari 对 :active 的默认样式（灰色背景+缩放）和你写的 transform: translateY() 冲突导致的视觉跳变。
解决它和 hover 无关，但常被一起误诊：
- 加
-webkit-tap-highlight-color: transparent;去掉点击高亮 - 对卡片加
touch-action: manipulation;，让 Safari 知道这是按钮类操作，减少延迟和默认反馈 - 如果用了
will-change: transform，记得在非 hover 态也保持一致，否则切换时会触发图层重组，造成闪烁
复杂点在于：这些规则要同时满足 CSS 优先级、媒体查询嵌套层级、以及 Safari 对 transform 的硬件加速策略。稍微写错顺序，就又回到“点一下闪一下”的状态。
