@media (hover: hover) 是最干净的隔离方案，能准确识别主输入设备是否支持真正悬停，需搭配 (pointer: fine) 使用，并补充 :active 实现移动端点击反馈，注意可点击性标记与真机测试。
CSS 的 :hover 在移动端点击后不消失，不是 bug，是规范行为 —— 移动端根本没有“鼠标移出”事件，浏览器只是把第一次点击映射为 hover 触发，但不会自动重置。
@media (hover: hover) 是最干净的隔离方案
这个媒体查询能准确识别设备是否具备真正的悬停能力（比如鼠标、触控板），而不是靠 UA 或屏幕尺寸猜测。它比 @media (any-hover: hover) 更严格，只匹配主输入设备支持 hover 的场景（排除平板手写笔等粗粒度输入）。
-
@media (hover: hover)会过滤掉绝大多数手机和平板，只对桌面浏览器、带触控板的 Mac、Windows 笔记本生效 - 必须搭配
(pointer: fine)才可靠，否则某些高精度触控屏（如 Surface）可能误判 - 不要写成
@media (hover)—— 缺少值会导致整个规则被忽略 - 注意兼容性：iOS Safari 9.3+、Android Chrome 52+、Edge 12+ 支持；IE 完全不支持
:active 必须补上，否则移动端完全没反馈
仅靠 @media (hover: hover) 关闭 hover，并不能解决“用户点了却看不出点了”的问题。这时候 :active 就是移动端的替代响应机制。
-
:active在手指按下瞬间触发，松开即失效 —— 行为接近 PC 端的 :hover + :active 组合 - iOS Safari 要求元素或其祖先绑定
touchstart事件，:active才能生效；最简单做法是给<body>加ontouchstart="" - 别用
!important强行覆盖 hover 样式，而是让:active自身定义完整状态（背景、缩放、下划线等） - 过渡动画时间建议 ≤ 0.15s，避免点击后延迟感明显
别碰 JS 模拟 hover，除非你真需要链式动画
监听 touchstart/touchend 并手动切 class，看起来灵活，实际引入三类风险：
立即学习“前端免费学习笔记（深入）”；
- 触摸穿透：快速连点可能触发两次
touchstart，导致 class 未清除就重复添加 - 滚动干扰：在页面滚动时触发
touchstart，误判为“点击”，样式异常激活 - 内存泄漏：没做事件清理，尤其在单页应用中反复挂载/卸载组件时
- 如果非要用，至少加
setTimeout(..., 0)延迟移除 class，避开 iOS 的 300ms click 延迟窗口
容易被忽略的细节：可点击性标记
即使写了 @media (hover: hover) 和 :active，如果元素没被浏览器识别为“可交互”，这些伪类依然不会触发。
- 确保元素有
cursor: pointer或tabindex="0"（后者对无<a>/<button>的 div 尤其关键） - 避免用
pointer-events: none包裹父容器 —— 它会直接禁用所有伪类，包括:active - 测试时别只看 Chrome DevTools 的 “Toggle device toolbar”，真机 touch 才算数；iOS Safari 表现最保守，应优先适配
