触屏设备上:hover“闪一下就消失”是因为ios/android仅短暂模拟一次:hover且立即清除，属w3c兼容策略而非bug；应使用@media (hover: hover) and (pointer: fine)精准启用，禁用时退化为:active/:focus反馈。
Bootstrap按钮的:hover效果在触屏设备上“异常”，不是代码写错了，而是浏览器根本没打算让它稳定生效——iOS和Android对:hover的支持是模拟的、瞬时的、不可靠的，且不同机型行为不一致。
为什么触屏设备上:hover会闪一下就消失
主流触屏浏览器（如Safari、Chrome for Android）在首次触摸后会短暂触发一次:hover，随即清除。这不是bug，是W3C规范允许的兼容性策略：为适配老网站而模拟悬停，但不提供持续状态。结果就是你看到按钮高亮一下、卡片抬升一帧、下拉菜单弹开又收起。
- 检查开发者工具的「Computed」面板，常会发现
background-color或transform被划掉，实际生效的是:active或:focus - 用
console.log('hover')监听mouseenter事件，在手机上几乎不会触发 - iPad Pro这类二合一设备上报
hover: hover为true，但手指操作时仍无持续悬停
别用max-width媒体查询判断是否禁用:hover
按屏幕宽度切样式（比如@media (max-width: 768px)）会误伤Surface、MacBook触控板用户，也漏掉大屏安卓平板。真正该用的是输入能力检测：
- 只在支持精细指针（鼠标/触控笔）且声明了悬停能力的设备上启用：
@media (hover: hover) and (pointer: fine) - 把整个
.btn:hover规则包进去，包括transition属性本身——否则Safari可能解析过渡但不触发 - 不要写
@media (hover: hover) and (pointer: coarse)，W3C规定这两者互斥，这条永远不匹配
:active在iOS Safari默认不工作怎么办
iOS Safari默认忽略:active样式，除非元素满足以下任一条件：
- 是原生
<button></button>或带role="button"且有tabindex - 其祖先（比如
）绑定了ontouchstart事件（最简写法：） - 样式里写了
cursor: pointer——但注意：这行CSS在移动端会被浏览器忽略，仅作桌面端fallback
实操建议：.btn:active { transform: scale(0.98); transition: transform .1s; }，持续时间别超过0.15s，避免拖慢点击响应。
用JS模拟is-hovered类时最容易漏的三件事
监听touchstart加类、touchend删类看似简单，但真实环境里常出问题：
- 没调
e.preventDefault()，导致安卓部分机型触发双击缩放或页面滚动中断 -
touchend在用户滑动时可能根本不触发，推荐用setTimeout延时300ms清理is-hovered类 - 按钮带跳转（如
<a href="/next"></a>），必须在click回调里立刻清除is-hovered，否则新页面加载后样式残留
真正难处理的不是“怎么让hover看起来像在动”，而是如何让hover的边界在鼠标、触控笔、手指之间自然消失——它藏在pointer: fine的判定里，也藏在你忘了给父容器加will-change: transform的那一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
