iPadOS Safari 的 :hover 是模拟行为而非真实悬停，首次点击后临时激活且易卡住；必须用 @media (hover: hover) and (pointer: fine) 包裹相关样式与 transition，并确保顺序正确。
在 iPadOS 浏览器中，:hover 被当作点击触发不是 bug，而是 Safari 的兼容策略：它只在首次点击后模拟一次 :hover，且不保证清除时机。不能靠“修复”让它变可靠，必须改交互逻辑。
为什么 iPadOS Safari 的 :hover 总是点一下才生效又卡住
iPadOS Safari 同时上报 hover: hover 和 pointer: coarse（因手指触控），但 CSS 媒体查询无法区分“真悬停”和“假模拟”。它会在你第一次 tap 元素时临时激活 :hover，之后立即退出；若页面没滚动或失焦，样式就“卡住”——这不是渲染错误，是 UA 对悬停状态栈的延迟清理机制。
@media (hover: hover) and (pointer: fine) 必须用，且顺序不能错
这个媒体查询才是唯一能过滤出“真鼠标/触控笔输入”的守门员。单独写 @media (hover: hover) 在 iPad 上恒为 true，毫无意义。
- 所有依赖
:hover的样式（如下拉菜单、工具提示、过渡动画）必须包裹进该媒体查询块内 -
transition属性也得包进去，否则 Safari 可能解析到却跳过动画 - 该块必须放在常规样式（如
.btn:hover）之后，否则会被直接覆盖 - 不要写
@media (hover: hover) and (pointer: coarse)—— W3C 规范中这两者互斥，这条永远不匹配
:active 在 iPadOS 上默认不触发，得手动“唤醒”
iPadOS Safari 默认忽略 :active，除非满足以下任一条件：
- 元素或其任意祖先绑定了
touchstart事件（最简做法：） - 元素是原生
，或带role="button"且有tabindex="0" - 仅靠
cursor: pointer无效，纯 CSS 声明在 iPadOS 上被忽略
:active 动画持续时间建议 ≤ 0.15s；别只改背景色，组合 transform: scale(0.98) + opacity: 0.9 更符合触控反馈直觉。
JS 模拟 is-hovered 类时，iPadOS 特有的三个坑
iPadOS 的 touch 事件行为比 Android 更微妙，尤其在分屏、外接键盘、Apple Pencil 切换场景下：
- 别在
touchend立即移除is-hovered类——用户滑动时touchend可能不触发，推荐用setTimeout(() => el.classList.remove('is-hovered'), 300) - 如果元素有
或router-link，必须在click回调里同步清除is-hovered，否则新页面加载时残留类会污染样式 - 监听需加
{ passive: false }，并在touchstart中调用e.preventDefault()，否则 iPadOS 可能触发双击缩放或中断滚动
真正难的不是让 :hover 在 iPad 上“工作”，而是接受它本就不该在那里工作——它的边界由 pointer: fine 定义，也由你是否忘了给父容器加 touch-action: manipulation 暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
