精准识别鼠标操作需用@media (hover: hover) and (pointer: fine)，它排除手指触摸，仅匹配鼠标/触控笔悬停；须包裹transition及transform/opacity等:hover效果；旧内核忽略此规则，属渐进增强；:active和:focus需配合保障移动端反馈与可访问性。
用 @media (hover: hover) and (pointer: fine) 精准识别鼠标操作
单靠 @media (hover: hover) 会把 Surface、iPad Pro、S22 这类混合设备全判成“支持悬停”，结果是手指点一下菜单就卡住不收。真正可靠的判断逻辑是：当前输入方式既支持悬停，又属于精细类型（鼠标或触控笔），自动排除所有手指触摸场景。
必须写成这样：
@media (hover: hover) and (pointer: fine) {
.nav-item:hover { display: block; }
.btn:hover { background-color: #007bff; }
}
注意三点：
-
transition属性也得包进这个媒体查询里，否则 iOS Safari 可能解析到但不触发动画 - 别只改颜色，
:hover配合transform: scale(1.02)或opacity更易察觉 - 旧版微信 X5 内核、UC 浏览器基本忽略这条规则，属渐进增强，不能当功能开关用
为什么 @media (pointer: coarse) 单独用也不行
@media (pointer: coarse) 表示粗粒度指针（即手指），但它无法区分“当前是否正在触摸”。它只是设备能力声明，不是实时输入状态。比如 iPad 横屏插着蓝牙鼠标时，pointer: coarse 仍为 true，但用户实际在用鼠标悬停。
立即学习“前端免费学习笔记（深入）”；
更关键的是：hover: hover 和 pointer: coarse 在规范中互斥，@media (hover: hover) and (pointer: coarse) 永远不会匹配——浏览器根本不会执行这条规则。
所以不要试图用它“专供触摸屏”，而应把它作为辅助条件，配合 :active 或 JS 事件做即时反馈。
移动端必须补上 :active 视觉反馈
iOS Safari 默认不触发 :active，除非元素满足以下任一条件：
- 绑定了
touchstart事件（最简写法：<body ontouchstart>） - 是原生
<button>，或带role="button"且有tabindex
:active 动画建议控制在 0.15s 内，仅改背景色容易被忽略，推荐组合：
.btn:active {
transform: scale(0.98);
opacity: 0.8;
}
若父容器设了 overflow: hidden，缩放可能被裁掉，需检查层级和裁剪边界。
:focus 是下拉菜单等交互组件的更优选择
比起 :hover 或 :active，:focus 在跨设备场景中行为更一致：PC 上点击/Tab 聚焦后保持展开，移动端触摸后同样获得焦点并维持状态，直到点击别处或失焦。
适用场景明确：
- 导航下拉菜单（
.dropdown:focus-within .submenu） - 表单控件的激活态反馈
- 键盘可访问性必须保留，不能只靠 hover
注意：移动端点击后 :focus 默认不显式高亮，需加 outline: none + 自定义边框/阴影，但要确保键盘用户仍能感知焦点位置。
真正难的不是写对媒体查询，而是意识到「设备能力」和「当前输入方式」是两回事——同一台 iPad，手指点和鼠标悬停该呈现完全不同的交互反馈，而 CSS 媒体查询只能告诉你“能做什么”，不能告诉你“此刻正在做什么”。
