如何通过CSS媒体查询禁用移动端的hover悬停特效？-css教程-PHP中文网

直接写 .card:hover 在手机上失效是因为触摸设备无真实悬停能力，ios/android 仅模拟一次且状态不持久；应使用 @media (hover: hover) and (pointer: fine) 包裹悬停样式与 transition，并补充 :active 反馈和精确过渡属性。

如何通过css媒体查询禁用移动端的hover悬停特效？

为什么直接写 `.card:hover` 在手机上会出问题

不是代码写错了，是交互模型不匹配。iOS 和 Android 浏览器根本不会触发真正的 :hover——它们最多在首次点击后短暂模拟一次，接着就丢弃状态。结果就是：点一下卡片闪一下阴影，再点就没反应；下拉菜单点开瞬间又自动收起；甚至某些安卓 WebView 因悬停样式反复重排，导致点击卡顿。这不是 bug，是你把桌面端的交互假设硬套到了触摸设备上。

用 `@media (hover: hover) and (pointer: fine)` 包裹才是正解

别再用 @media (max-width: 768px) 或 UA 字符串判断设备类型，Surface Pro、iPad Pro 这类二合一设备宽度超 1000px，但确实支持鼠标悬停。唯一靠谱的方式是让浏览器自己报告能力：

@media (hover: hover) and (pointer: fine) 表示“当前有可靠悬停能力 + 输入精度足够高”，iOS/普通安卓机天然不满足，会被自动排除
所有悬停相关样式（transform、box-shadow、transition）必须一起包进去，单独写 transition 在基础类里仍可能被解析并引发意外动画
不要写 @media (hover: none) 去清空样式——很多安卓浏览器误报 hover: hover，反而漏掉真实触屏设备

@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
}

禁用 hover 后，触摸用户需要什么替代反馈

删掉 :hover 不等于完成适配。用户点下去没视觉反馈，第一反应是“我点歪了”。你得主动补上：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:active 必须保留，但 iOS Safari 默认禁用它，需给元素加 cursor: pointer 或监听 touchstart 才能激活
关键按钮可加轻量级 tap 动画：transform: scale(0.95)，持续时间 ≤ 150ms，避免拖慢响应
别在媒体查询里清空所有 :focus 样式——键盘用户和屏幕阅读器依赖这个路径
检查你用的框架是否已内置该逻辑：Tailwind CSS v3.3+、Bootstrap 5.3+ 默认将 hover: 工具类包裹在 (hover: hover) and (pointer: fine) 中，但自定义构建或老版本可能没启用