按钮hover未复原需检查CSS是否覆盖默认状态或JS未配对移除类；纯CSS应只定义:hover并写transition于默认态；移动端应避免依赖hover，改用:active或touch事件。
按钮 hover 状态没自动复原？检查 CSS 是否覆盖了默认状态
常见现象是鼠标移开后按钮卡在悬停样式（比如背景变深、文字上移），本质是 :hover 样式被其他规则意外锁定，或用了 JavaScript 强制添加类但没移除。纯 CSS 场景下，只要没写 :active 或 :focus 干扰，:hover 本该自然退出。重点排查：
- 是否给按钮加了
!important的:hover样式，同时又写了更宽泛的选择器（如.btn:hover, .btn:focus）导致焦点残留 - 是否用 JS 绑定了
mouseenter但漏掉mouseleave，或用了classList.add()却没配对classList.remove() - 是否设置了
outline: none却忘了处理键盘聚焦（:focus）状态，用户 Tab 进入后移开鼠标，按钮仍保持“激活”外观
用纯 CSS 实现「进入变色、离开复原」的可靠写法
不需要 JS，靠 CSS 自带的状态切换最稳。关键是只定义 :hover，不碰默认态和其它伪类，让浏览器自己管理状态流转：
.add-to-cart {
background-color: #007bff;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.add-to-cart:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
注意两点：
-
transition必须写在默认态（.add-to-cart），不能只写在:hover里，否则离开时无动画 - 避免在
:hover中修改display、position或触发布局重排的属性，容易造成闪烁或偏移
JavaScript 手动控制时，mouseleave 事件必须配对 mouseenter
如果业务逻辑强制需要 JS（比如要发埋点、禁用按钮防重复点击），那 mouseleave 就不能省：
立即学习“前端免费学习笔记（深入）”；
const btn = document.querySelector('.add-to-cart');
btn.addEventListener('mouseenter', () => {
btn.classList.add('is-hovered');
});
btn.addEventListener('mouseleave', () => {
btn.classList.remove('is-hovered');
});
对应 CSS 只写：
.add-to-cart.is-hovered {
background-color: #0056b3;
transform: translateY(-1px);
}
容易踩的坑：
- 用
mouseover/mouseout替代mouseenter/mouseleave—— 前者会冒泡触发子元素进出，导致频繁闪动 - 多个事件监听器共存时（比如同时绑了 click 和 hover），没用
event.stopPropagation()或合理判断event.target，造成状态错乱
移动端 Safari 或旧版 Android 浏览器上 hover 失效？别依赖 hover
触摸设备没有“鼠标离开”概念，:hover 在 iOS Safari 上仅在点击后短暂生效，且不会自动恢复。这时候硬靠 CSS 是不可靠的：
- 真要兼容触摸设备，改用
:active做按下反馈，或用 JS 监听touchstart/touchend - 更稳妥的做法：把“加入购物车”按钮设计成无 hover 变化，仅用微动效（如轻微缩放）或图标变化（+ → ✓）来提供操作反馈
- 不要在
@media (hover: hover)查询外写 hover 样式，否则可能在不支持的设备上白屏或错位
hover 的边界很清晰：它只属于精确指针设备。强行让它覆盖触摸场景，最后往往得补一堆 hack。
