iOS Safari中:hover点击后“卡住”不是bug而是规范行为，因移动端无悬停概念，浏览器将首次触摸视为:hover入口却不主动重置；需用@media (hover: hover) and (pointer: fine)精准限定鼠标/触控笔场景，并包裹transition等整条hover链，同时辅以:active反馈和touchstart模拟类确保跨端一致性。
为什么iOS Safari里:hover点击后“卡住”不消失
这不是bug，是规范行为：移动端没有悬停概念，浏览器把第一次触摸当作:hover入口，之后不主动重置状态。结果就是点一下菜单展开，再点别处也不收，:hover样式一直挂着。
根本原因是@media (hover: hover)只判断设备是否支持悬停，不判断当前输入方式。iPad接妙控板时会同时报告hover: hover和pointer: coarse，导致手指点也触发:hover逻辑。
必须叠加pointer: fine才能排除触控场景：
-
@media (hover: hover) and (pointer: fine)才真正代表“鼠标或触控笔在操作” - 这条规则要包裹整个:hover链，包括
transition声明本身，否则Safari可能解析到过渡属性，引发Vue/React组件意外抖动 - 禁用
transition: all，只写transform、opacity等可硬件加速的属性
为什么:active在微信/QQ内置Webview里几乎不生效
不是CSS失效，而是WebKit的300ms双击延迟拦住了激活态触发时机。:active本该在按下瞬间生效，但iOS Safari默认压着它等到touchend之后才更新样式，视觉上就是“松手才闪一下”或者干脆没反应。
立即学习“前端免费学习笔记（深入）”；
给document.body加空touchstart监听器能绕过这个机制，但有硬性要求：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须用
addEventListener('touchstart', () => {}, { passive: true })，不能用ontouchstart=""属性写法 -
{ passive: true }是iOS 11+强制要求，漏掉会报黄色警告，极端情况下监听器被静默禁用 - 函数体可以为空，但不能传
null或省略，写成() => {}或function() {}都行
为什么加了touch-action: manipulation还是没用
touch-action: manipulation确实能关闭双击延迟，但它只对**具体元素**生效，不是全局开关。写body { touch-action: manipulation }反而可能禁用页面滚动，尤其在长列表或卡片流中。
正确做法是精准作用于交互区域：
- 只加在明确需要点击的元素上，比如
.btn、[role="button"]、.card-item - 配合禁用系统高亮：
-webkit-tap-highlight-color: transparent，否则灰色遮罩会盖住你的:active样式 - 动画属性只能用
transform和opacity，改background-color会触发repaint，低端安卓机明显卡顿
为什么用touchstart模拟:hover比依赖伪类更可靠
因为触控设备根本没有“悬停”这一物理状态，浏览器无法可靠判断用户是准备点击还是划过。Safari对:hover的支持仅限于可点击元素（如<a>、<button>），且多数情况只短暂触发一次。
用JS手动控制类名是最轻量的解法：
- 监听
touchstart添加is-hovered类，监听touchend或touchcancel移除 - CSS里写
.btn.is-hovered而不是.btn:hover，避免伪类失效带来的空白反馈 - 保留双兼容写法：
.btn:hover, .btn.is-hovered，兼顾桌面和触控场景
复杂点在于，:active生命周期极短（通常touchstart到touchend之间可能滑动、取消、超时——这些边界情况必须显式处理，否则状态残留会破坏体验。
