移动端无“悬停结束”事件，点后样式卡住是浏览器兼容行为而非bug；ios safari和安卓chrome首次touchstart触发:hover但无对应事件清除，导致视觉残留；最轻量修复是添加ontouchstart=""属性，新内核可用@media (hover: hover) and (pointer: fine)，复杂交互需js模拟is-hovered类并延迟清除。
这个问题不是 CSS 写错了，而是移动端根本就没有“悬停结束”这个事件 —— 点完之后样式卡住，是浏览器行为，不是 bug。
为什么 iOS Safari 和安卓 Chrome 会把 :hover “锁住”
移动端浏览器为了兼容 PC 页面，会在首次 touchstart 时触发一次 :hover，但没有对应的 touchleave 或 mouseout 来清除它。结果就是：点完按钮，背景色/边框/阴影一直挂着，直到你滚动、切页、或点别的地方才可能被顺带清掉。
- iOS Safari 尤其典型：返回上一页后，链接还亮着
:hover样式 - 某些 Android Chrome（尤其旧版本）会在页面滚动时延迟清除，造成视觉残留
- 微信内置浏览器（X5 内核）压根不支持
@media (hover: hover)，整块规则直接忽略
别用 @media (any-hover: hover) 做开关
这个媒体查询只表示“设备硬件上 *可能* 支持 hover”，比如 iPad 插了蓝牙鼠标，哪怕你正用手指点，(any-hover: hover) 也返回 true。它不能反映当前输入方式，也不能帮你关掉触摸下的 hover 行为。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写了
@media (any-hover: hover) { .btn:hover { background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee; } }→ 在 iPad 上依然生效，且在 X5 内核里直接失效 - 真正可用的是
@media (hover: hover) and (pointer: fine)，但它只在 iOS Safari 13.4+、Chrome 82+ 等较新内核中有效 - 必须把这类媒体查询块写在常规样式之后，否则会被普通
.btn:hover覆盖
最轻量有效的修复：给元素加 ontouchstart=""
这是目前兼容性最好、侵入性最小的方案。多数浏览器（包括 iOS Safari、主流安卓 Chrome）在检测到 ontouchstart 属性后，会主动放弃维护该元素的 hover 状态栈。
- 写法很简单：
<button ontouchstart="">提交</button>或@#@#@#@#@#@#@#@#@#@0 - 不需要 JS 绑定，空属性即可生效
- 对
<div> 等非交互元素，需额外加 <code>role="button"或tabindex="0"才能被识别为可点击 - 注意：若父容器设了
pointer-events: none，这个属性会被阻断，hover 依然卡住 - 监听
touchstart添加is-hovered类，监听touchend或touchcancel移除；但别在touchend立即删——用户滑动时它可能根本不触发 - 推荐做法：加
setTimeout延迟 300ms 清除，或在click回调里立即清除（防止跳转后新页面样式污染） - 务必调用
e.preventDefault()，否则部分安卓机型会触发双击缩放或中断滚动 - CSS 写成
.btn:hover, .btn.is-hovered { ... }，兼顾鼠标和触控场景
需要精确控制时，用 JS 模拟 is-hovered 类
当你要做菜单展开、卡片浮起等依赖持续悬停态的功能时，伪类已不可靠，必须接管状态生命周期。
真正难的不是怎么让 hover 显出来，而是怎么让它在手指抬起来那一刻就退干净 —— 这个边界不在 CSS 里，而在 pointer: fine 的判定逻辑、touchcancel 的监听时机，以及你是否记得给父容器去掉 overflow: hidden（否则 hover 触发的位移动画会被剪掉）。
