移动端 touch 设备无真正 :hover，应优先用 :active 配合 touch-action: manipulation 实现点击反馈，需 js 管理持久状态，并排查 pointer-events: none 的隐式影响。
移动端 touch 设备没有 :hover 伪类触发机制
大多数触摸屏设备（ios safari、android chrome 等）在默认行为下不会持续触发 :hover，因为没有“悬停”这一物理状态。系统通常只在点击瞬间模拟一次 :hover（如 iOS 上的“轻点两下”才激活），且随后立即失效。这不是 css 写错了，而是浏览器主动抑制了该伪类的常规响应。
用 :active 替代 :hover 实现点击反馈
对按钮、链接等可交互元素，:active 在触摸按下时可靠触发，且兼容性极好。它不依赖悬停，只响应用户当前是否正按着该元素。
-
:active必须配合touch-action: manipulation（尤其在 iOS 上）才能稳定响应，否则可能被滚动/缩放手势拦截 - 避免仅靠
:active做“常驻高亮”，它只在按下期间生效；若需点击后保持状态，得用 JS 切换 class - 示例：
a { color: #333; }
a:active { color: #007aff; }
a { touch-action: manipulation; }
需要“悬停效果保留”时，改用 JS 控制 class
当设计要求类似桌面端的“手指按住即显示菜单/提示”，不能靠 CSS 伪类实现，必须由 JS 显式管理状态。
- 监听
touchstart添加临时 class（如is-hovered），touchend/touchcancel移除 - 注意避免
click和touchstart重复触发，可加preventDefault()或用pointer-events: none暂时禁用后续事件 - CSS 中写
.btn:hover, .btn.is-hovered { … }，兼顾桌面与移动端逻辑统一
别忽略 pointer-events: none 对伪类的影响
如果父容器或遮罩层设置了 pointer-events: none，子元素的 :hover 和 :active 都会失效——这在做弹窗、Tooltip 时极易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 检查 dom 层级中是否有祖先元素设置了
pointer-events: none，特别是全屏遮罩或动画过渡中的临时节点 - 替代方案：用
visibility: hidden或opacity: 0+pointer-events: auto控制可见性，而非直接禁用指针事件 - 调试技巧：在 DevTools 中选中元素，看右侧 Styles 面板里
pointer-events是否被继承或覆盖
移动端没有真正的 hover，强行用 CSS 伪类去“修复”只会增加不可靠路径。关键不是让 :hover 工作，而是承认交互模型不同，用 :active 做即时反馈，用 JS 管理需要持久化的状态。最容易被忽略的是 touch-action 缺失和 pointer-events 的隐式继承。