移动端无真正:hover，因触控设备无悬停物理动作；iOS/Android仅模拟一次:hover且易卡住；应使用@media (hover: hover) and (pointer: fine)检测，配合:active和JS模拟实现可靠交互反馈。
移动端根本没有真正的 :hover，这不是你写错了，而是浏览器压根不触发它——强行套用桌面端逻辑，必然失效或残留。
为什么 :hover 在 iOS/Android 上不生效或卡住
触控设备没有“悬停”这个物理动作。iOS Safari 和 Chrome for Android 会把第一次 touchstart 当作 mouseover 模拟一次 :hover，但之后既不持续、也不自动退出。用户点一下按钮，:hover 样式可能卡住几秒，直到滚动或点击别处才消失——这不是 bug，是规范行为。
- 真机调试时看到
:hover样式被划掉，大概率不是 CSS 没编译，而是伪类根本没激活 -
:active只在手指按住瞬间生效，松手就回退，不能替代:hover的持续反馈 - 原生
<button>有独立高亮逻辑，和:hover并行运行，容易打架
@media (hover: hover) and (pointer: fine) 是唯一靠谱的检测方式
别用 ontouchstart 全局判断设备类型，iOS 17+ 和桌面 Chrome 都可能暴露该属性，误判率高。CSS 媒体查询才是标准解法：它表示“当前输入方式支持可靠悬停 + 指针精度高”，即鼠标或触控板场景。
- 把所有动效相关样式（如
transform、box-shadow、transition）只放在这块媒体查询里 - 基础状态样式（无悬停）始终生效，保证移动端默认体验不降级
- 不要写
@media (hover: none)—— 多数现代浏览器根本不报告这个值，整块规则会被忽略 - 顺序很重要：媒体查询块必须写在常规样式后面，否则会被覆盖
必须手动补 :active，且要加可交互标记
仅靠 :hover 无法提供触控反馈，:active 是底线。但它在 iOS Safari 上默认不生效，除非元素被识别为“可交互目标”。
立即学习“前端免费学习笔记（深入）”；
- 给按钮、卡片等加
cursor: pointer或tabindex="0" -
:active样式建议组合使用：轻微缩放（transform: scale(0.98)）+ 透明度微调（opacity: 0.9） - 确保父容器没设
overflow: hidden，否则缩放会被裁剪 - 避免只写
active:bg-gray-200就以为完事——快速滑动时可能完全感知不到
需要持续反馈？用 JS 模拟 is-hovered 类
如果交互依赖“悬停态维持”（比如菜单展开、图片放大），不能只靠伪类。JS 模拟是最可控路径，但要注意边界条件。
- 监听
touchstart添加is-hovered类，监听touchend或touchcancel移除 - 加
{ passive: false }并调用e.preventDefault()，防止在滚动容器内误触发 - 快速连点多个元素时，前一个
is-hovered可能残留，建议统一用document.addEventListener('touchstart', ...)清理全局 - 不要用
ontouchstart全局判断是否为移动设备——它在桌面 Chrome 和 iOS 17+ 也返回 true
真正卡住人的永远不是 :hover 本身，而是把它当成功能开关来用。它只适合做视觉增强，不该承载状态切换或关键交互逻辑。移动端的限制只是表象，背后全是布局、编译、层级这些老问题在借壳出现。
