触摸设备上:hover失效是因为其无物理悬停状态，浏览器仅在首次点击时模拟一次且不持续触发；应使用@media (hover: hover)精准启用悬停样式，并辅以:active和:focus-within提供触控与键盘双模反馈。
触摸设备上 :hover 为何失效？
因为绝大多数触摸屏（iOS Safari、Android Chrome）不触发 :hover，系统默认将首次点击视为“模拟悬停”，仅激活一次，后续交互就跳过该状态。这不是 bug，而是浏览器为兼容旧网页做的妥协策略——但恰好让纯 :hover 卡片在 iPad 或手机上“动不了”。
更麻烦的是：部分安卓 Chrome 会延迟触发 :hover 直到手指抬起，造成卡顿感；iOS 则干脆在页面加载后立即清除所有 :hover 状态。
用 @media (hover: hover) 精准隔离悬停支持设备
这是目前最可靠、原生、无 JS 的检测方式，比查 navigator.userAgent 或监听 touchstart 更轻量且语义清晰。
- 只在真正支持持续悬停的设备（如带触控板的 Mac、Windows 笔记本、鼠标外接的 iPad）中启用
:hover样式 - 不匹配时，样式回退到默认态（即无悬停效果），避免意外触发或闪烁
- 注意：不能写成
@media (hover: none)来“启用触摸样式”——它匹配的是“完全不支持 hover”的设备，但很多触摸设备其实是hover: on-demand，这个值不会被捕捉到
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
}
触摸设备需要替代交互反馈？加 :active + focus-within
用户点按卡片时，至少应有瞬时视觉反馈，否则会怀疑没点中。单纯依赖 :active 不够——它只在按下瞬间生效，松手即消失，且无法覆盖键盘导航场景。
-
:active适合做按下态（如背景压暗、缩放微调），但必须配合transition，否则太突兀 -
:focus-within是关键：当卡片内任一可聚焦元素（如链接、按钮）获得焦点时激活，兼顾键盘 tab 导航和屏幕阅读器 - 别忘了给卡片本身加
tabindex="0"，否则:focus-within在无子聚焦元素时无法触发
.card {
transition: background-color 0.15s, transform 0.2s;
}
.card:active {
transform: scale(0.98);
}
.card:focus-within {
outline: 2px solid #007aff;
outline-offset: 2px;
}
为什么不用 JavaScript 检测 'ontouchstart' in window？
这个判断在现代浏览器里已不可靠：Chrome for Android 默认启用触摸事件，但桌面版 Chrome 开发者工具切“移动端模拟”时也返回 true；iOS 17+ 甚至在带鼠标外接的 iPad 上仍报告 ontouchstart 存在。
更实际的问题是：JS 检测有执行时机问题——CSS 已渲染完毕，再动态加 class 容易闪动；而媒体查询由浏览器原生解析，无时序风险。
真要 JS 辅助，只建议用于记录行为（比如埋点“用户是否触发过悬停”），而非控制样式主逻辑。
真正难处理的是混合输入设备：比如 Surface 平板既插键盘又连触控笔，此时 (hover: hover) 为 true，但用户正用手指操作——这时悬停效果反而干扰体验。这种边界情况，没有银弹，只能靠设计克制：悬停动效务必轻微、快速、不遮挡内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
