不少前端开发者都曾遇到这样一个棘手的场景：在 Safari 浏览器中，当鼠标滑过按钮或菜单时，预期的背景变色、下拉菜单展开、tooltip 提示等效果统统没有反应。打开开发者工具后，发现连 hover 状态都无法激活。此时先别急着怀疑 CSS 写错了，这很可能是 Safari 对悬停行为解析习惯与 Chrome、Firefox 存在差异导致的。问题往往隐藏在设备类型判断、CSS 媒体查询的细微规则甚至是组件命名这些细节之中。
确认当前设备是否支持悬停
首先要搞清楚 Safari 是否将当前设备识别为“支持悬停”的设备。
操作步骤很简单：打开 Safari → 菜单栏点击「Safari」→「设置」→「高级」，勾选「在菜单栏中显示开发菜单」。接着任意打开一个网页，按 ⌥ + ⌘ + I 调出开发者工具，切换到「控制台」，输入并回车：matchMedia('(hover: hover) and (pointer: fine)').matches。
如果返回的结果是 false，那么问题就很明确了：Safari 判定当前设备不支持精细悬停。这可能是因为触控板被识别为粗粒度指针，或者 iPad 连接了蓝牙鼠标但系统未开启精细模式，也可能是 macOS 设置中禁用了指针精度。在这种情况下，你编写的所有 :hover 规则都会被忽略。请牢记，这是前提性问题，不解决它，修改再多 CSS 都无济于事。
检查 CSS 是否被 Safari 主动忽略
其次，需要检查你精心编写的样式是否被 Safari 的媒体查询“半路拦截”了。
排查方法有两种：第一，在开发者工具的「元素」面板中定位目标元素，查看右侧「样式」区域。如果发现你的 hover 类（例如 hover:bg-blue-500）被划掉，并且旁边标注了 @media (hover: none)，那就说明它被 Safari 主动排除。第二，直接在控制台执行 getComputedStyle(document.querySelector('你的选择器'), ':hover').backgroundColor，如果返回空字符串或默认值，而不是你设定的颜色，就证明 :hover 根本没有参与计算。
这种情况通常是因为你在 @media (hover: none) 这个媒体查询块内写了 :hover 规则。然而，Safari 在触控板模式下也可能触发这个查询，导致桌面端用户也跟着丢失悬停反馈。因此，一个基本准则是：不要在 hover: none 的媒体块中编写任何 :hover 规则。
排查 Vue/React 组件级干扰
如果你使用的是 Vue 3 或 React 构建的 SPA 页面，并且问题只在 Safari 上出现，那还应该检查组件层面是否存在干扰。
操作方法并不复杂：打开开发者工具，在「元素」面板中右键点击那个可交互元素，选择「检查元素」。然后查看它的 class 列表，看看是否有一个与组件名完全相同的类名。例如，组件名为 name: 'UserCard'，而元素上恰好有 class="UserCard"。
临时将这个 class 重命名，比如改成 user-card-item，然后刷新页面，测试悬停是否恢复。如果恢复，就可以确认这是 Safari 渲染引擎对同名类与组件名解析时产生的冲突。Vue 官方早已确认这是 Safari 的特定兼容性问题，并非代码错误。这个操作非常简便，直接修改 class 名称即可，无需重构组件逻辑。
验证 tooltip 定位是否因字体基准偏移
如果悬停后 tooltip 出现了，但位置却完全不对——比如飞出屏幕或贴在某个角落不动，那很可能是 Safari 对 em 或 rem 单位的 font-size 解析不一致，导致基于百分比的 translate 计算出现偏差。
一个简单的修复方式是：在目标元素或其最近的公共祖先上添加内联样式 style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"。或者，直接在全局 CSS 中强制统一根字体：html { font-size: 16px; }。这一小改动能立即修复因 Safari 默认字体继承链混乱引起的 tooltip 错位，完全不需要改动伪元素定位逻辑。
绕过 :hover 限制的 JS 补丁方案
如果以上方法尝试后仍无法解决，还有一个终极方案：用 JavaScript 模拟悬停效果，从而绕过 :hover 本身的限制。
推荐的方法是：给所有需要悬停反馈的元素添加一个 data-hoverable 属性。然后在页面加载后执行以下脚本：
document.querySelectorAll('[data-hoverable]').forEach(el => {
el.addEventListener('touchstart', () => el.classList.add('is-hovered'));
el.addEventListener('touchend', () => el.classList.remove('is-hovered'));
el.addEventListener('mousedown', () => el.classList.add('is-hovered'));
el.addEventListener('mouseup', () => el.classList.remove('is-hovered'));
});
之后，在 CSS 中使用 .is-hovered { background-color: #3b82f6; } 来替代原先的 :hover 规则。
这里有两个细节需要特别注意：第一，必须监听 touchstart 事件而不是 click，否则 iOS 用户会感受到明显的点击延迟。第二，在 touchend 后要立即移除 is-hovered 类，否则当用户手指滑出元素区域时，状态会残留。
