移动端:hover基本失效，应改用:active或JavaScript模拟点击反馈；:active需配合touch-action、transition及无障碍属性确保兼容性与体验。
移动端没有 hover 状态，直接写 :hover 不会触发点击反馈，必须改用 :active 或 JavaScript 模拟，否则按钮按下去没视觉反馈，用户会觉得没点上。
为什么 :hover 在手机上基本失效
多数 iOS 和 Android 浏览器在 touch 设备上仅对可点击元素（如 <a></a>、<button></button>）短暂触发一次 :hover，且常延迟或不触发；更糟的是，它不会随手指按压实时响应，和桌面端行为不一致。
- 真机测试时，
button:hover { opacity: 0.7; }可能完全不生效，或松手后才闪一下 - 某些 WebView（如微信内置浏览器）会禁用
:hover以避免误触 -
:active是唯一被所有移动端浏览器稳定支持的伪类，但只在 touchstart 到 touchend 之间生效
:active 的正确写法与限制
直接给悬浮按钮加 :active 样式最轻量，但要注意触发时机和兼容性细节：
- 必须确保元素有
cursor: pointer或明确的touch-action: manipulation，否则部分 Android 机型可能忽略:active -
:active在快速点击（tap）时可能来不及渲染，建议配合transition做微动效，比如transform: scale(0.95) - iOS Safari 对
:active有 300ms 延迟，默认启用 click 延迟，需加meta viewport并设touch-action: manipulation
button.fab:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
需要长按/按住反馈？得用 JavaScript
如果设计要求「按住变色、松开恢复」，或者要支持 Android 的 longpress，:active 就不够用了——它无法区分按住时长，也无法在 touchend 后保持状态。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart添加临时 class（如is-pressed），touchend/touchcancel移除 - 避免同时监听
mousedown，否则 PC 端重复触发；可用if ('ontouchstart' in window)区分 - 注意 touchmove 事件：手指滑出按钮区域时也该取消 press 状态，否则视觉残留
fabEl.addEventListener('touchstart', () => fabEl.classList.add('is-pressed'));
fabEl.addEventListener('touchend', () => fabEl.classList.remove('is-pressed'));
fabEl.addEventListener('touchmove', () => fabEl.classList.remove('is-pressed'));
别忘了无障碍和性能细节
光有视觉反馈还不够：iOS VoiceOver 用户靠 focus 状态感知操作，Android TalkBack 依赖 role="button" 和 aria-pressed；另外，transform 比 opacity 更高效，避免触发布局重排。
- 给悬浮按钮加
role="button"和tabindex="0"，确保键盘可聚焦 - 如果按钮有开关语义（比如「静音」），用
aria-pressed="true/false"动态更新 - 慎用
box-shadow在:active中做“按压凹陷”效果——低端安卓机容易掉帧
真正难的不是写几行 CSS，而是让 feedback 在不同机型、不同系统版本、不同手势速度下都可靠响应；:active 是底线，JS 控制是上限，而 touch-action 和 aria 属性才是上线前最容易漏掉的那层。
