移动端无真正:hover，iOS/Android仅延迟触发且不稳定；应改用touchstart/touchend手动切换is-hovered类，配合CSS实现可靠悬停效果。
移动端没有真正的 :hover，直接依赖 CSS 伪类会失效——这不是 bug，是规范行为。
为什么 :hover 在 iOS/Android 上“偶尔有效”或“点一下才触发”
移动浏览器（尤其是 Safari）为兼容部分桌面网站，会对 :hover 做延迟触发：首次触摸时激活 hover 状态，但随后立即清除；后续触摸若未触发 click 事件，则可能不维持。这导致悬停菜单闪退、下拉不展开、提示框消失等现象。
- Chrome for Android 默认禁用
:hover的持续响应（仅在“模拟桌面站点”时临时启用） - iOS Safari 对
:hover的支持始终受限，且不响应touchstart后的连续悬停判断 - 即使加了
@media (hover: hover)查询，也无法让触控设备“模拟鼠标悬停”的语义
用 touchstart + touchend 手动切换 class 更可靠
不依赖伪类，改用 JavaScript 控制状态类，再通过 CSS 定义对应样式。这是目前最轻量、兼容性最好的方案。
- 给目标元素绑定
touchstart事件，添加is-hovered类（注意：不用mouseenter，它在移动端基本不触发） - 同时监听
touchend或touchcancel，移除该类（避免状态残留） - CSS 中用
.target.is-hovered { … }替代.target:hover { … } - 为兼顾桌面端，可同时监听
mouseenter/mouseleave，但需注意事件冲突（建议用pointerdown统一入口更稳妥）
// 示例：单个按钮的触控悬停模拟
const btn = document.querySelector('.menu-toggle');
btn.addEventListener('touchstart', () => {
btn.classList.add('is-hovered');
});
btn.addEventListener('touchend', () => {
btn.classList.remove('is-hovered');
});
// 桌面端补充（可选）
btn.addEventListener('pointerenter', () => {
btn.classList.add('is-hovered');
});
btn.addEventListener('pointerleave', () => {
btn.classList.remove('is-hovered');
});
避免“点击穿透”和重复触发的细节
直接在 touchstart 添加类后，如果该元素还绑定了 click，可能造成快速点击两次（一次 touchstart，一次 click），导致状态翻转异常。
- 给元素加
cursor: pointer可强制 iOS 触发touchstart（否则某些 inline 元素可能不响应） - 使用
event.preventDefault()在touchstart中阻止默认行为，能抑制部分双击缩放或滚动干扰 - 对需要长按/滑动操作的区域，慎用
touchstart切换悬停态，优先考虑pointerdown+pointerup配合isPrimary判断 - 若页面有大量此类元素，建议用事件委托 +
dataset标记控制范围，避免内存泄漏
真正难处理的是“悬停即展开菜单，但用户想滑动页面”的场景——这时候不能只靠加 class，得结合 scroll 监听或 touchmove 距离阈值来自动退出悬停态。这点容易被忽略，但恰恰是移动端交互的真实复杂点。
