@media (hover: hover) 是最可靠的悬停检测方式，它严格判断系统是否稳定支持 :hover 伪类，而非仅检测输入设备精度；需用其包裹所有悬停样式与 transition，并配合 matchmedia 在 js 中同步状态。
@media (hover: hover) 是目前最可靠的 CSS 媒体查询方式，用于判断设备是否具备「稳定、精确且可预测的悬停能力」——注意，它不等价于“有没有鼠标”，而是检测系统是否真正支持 :hover 伪类在常规交互中可靠触发。
为什么不能只靠 pointer: fine 或 any-hover: hover
pointer: fine 只说明有高精度输入设备（如触控笔或鼠标），但不保证悬停可用（比如某些触屏 Windows 笔记本在触控模式下会禁用 :hover）；any-hover: hover 表示“任意输入方式中至少有一种支持悬停”，但可能误导：它在混合设备（如带触控屏的 Mac）上常返回 hover，而实际网页滚动时误触仍会触发 :hover，导致体验错乱。
@media (hover: hover) 的语义更严格：仅当系统明确启用并稳定支持悬停交互时才匹配。实测中，它在桌面 Chrome/Firefox/Safari（鼠标连接时）返回 true；在 iOS Safari、Android Chrome、Surface 触控模式下均返回 false。
怎么写才能让悬停样式真正生效
关键不是“加个媒体查询”，而是用它包裹所有依赖悬停的交互逻辑，避免样式泄漏到不支持的设备上：
@media (hover: hover) {
.button {
background-color: #007bff;
}
.button:hover {
background-color: #0056b3;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 这里可以安全加 transition */
.menu-item > .submenu {
opacity: 0;
transform: translateY(-5px);
transition: opacity 0.2s, transform 0.2s;
}
.menu-item:hover > .submenu {
opacity: 1;
transform: translateY(0);
}
}
- 不要把
:hover样式写在媒体查询外，否则触屏设备点按后可能短暂触发（iOS Safari 的“点击延迟悬停”行为） - 如果需要同时支持点击展开和悬停展开（如响应式导航），
@media (hover: hover)内只放悬停逻辑，点击逻辑单独写在外部或用 JS 控制 -
transition也建议包在该媒体查询内——触屏设备不需要悬停动画，省掉能减少渲染开销
JS 中如何同步获取这个状态
CSS 媒体查询可通过 window.matchMedia() 在 JS 中读取，且支持监听变化（例如用户外接鼠标后热插拔）：
const hoverQuery = window.matchMedia('(hover: hover)');
console.log(hoverQuery.matches); // true / false
<p>// 注意：必须在页面加载后立即检查，因为首次匹配可能已确定
if (hoverQuery.matches) {
document.body.classList.add('supports-hover');
} else {
document.body.classList.add('no-hover');
}</p><p>// 监听变化（如平板从触控模式切到桌面模式）
hoverQuery.addEventListener('change', e => {
if (e.matches) {
document.body.classList.remove('no-hover');
document.body.classList.add('supports-hover');
} else {
document.body.classList.remove('supports-hover');
document.body.classList.add('no-hover');
}
});</p>
- 不要用
navigator.platform或userAgent判断——它们无法反映当前实际输入能力 -
matchMedia返回的对象在旧版 Safari（addEventListener，需降级用addListener - 服务端无法直接获取该值，必须由客户端计算后通过 JS 注入 class 或发请求
真正的难点不在写法，而在设计决策：一旦用了 @media (hover: hover)，就得接受「同一组件在不同设备上有完全不同的交互路径」。比如下拉菜单，在桌面靠悬停展开，在手机必须点开——这个分界点不能模糊，否则用户会在 iPad 上既点不开又悬停不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
