必须加在或上，而非父容器；否则鼠标移出按钮边缘即失效，导致卡顿误触。需配合transition实现平滑变化，并兼顾:focus、:active及:disabled状态以保障可用性与可访问性。
hover 效果加在哪个元素上才对
必须加在 <button></button> 或包裹按钮的 <a></a> 上，而不是父容器（比如 <div class="cart-item">）。否则鼠标移到按钮边缘外侧就失效，用户实际体验会卡顿或误触。
<p>常见错误是把 <code>:hover 写在按钮的父级上，结果整个商品卡片都响应，但真正要反馈的是“加入购物车”这个操作本身。
用 CSS transition 做平滑变化而不是突变
直接改背景色或文字色会显得生硬。加 transition 才有现代按钮感：
button.add-to-cart {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
button.add-to-cart:hover {
background-color: #45a049;
transform: scale(1.03);
}
-
transform: scale()比改宽高更轻量，不会触发重排 - 两个属性都写进
transition，避免只过渡背景色而忽略缩放 - 时间控制在
0.15s–0.25s之间，太快没感知，太慢像卡顿
移动端 hover 无效？得补上 focus 和 active
iOS Safari 和大多数安卓浏览器不支持纯 :hover，手指点下去没反馈。必须同时写：
立即学习“前端免费学习笔记（深入）”；
button.add-to-cart:hover,
button.add-to-cart:focus,
button.add-to-cart:active {
background-color: #45a049;
transform: scale(1.03);
}
-
:focus覆盖键盘 Tab 导航场景 -
:active确保触摸瞬间有按下态（哪怕只有几十毫秒） - 别漏掉
outline: none—— 但仅在已提供足够视觉反馈（如背景变色+缩放）时才加，否则损害可访问性
按钮禁用状态（disabled）下 hover 还生效？得拦截
当库存为 0 或正在加载时，你可能设了 disabled，但默认 CSS 的 :hover 在部分浏览器里仍会触发（尤其旧版 Edge）。安全做法是显式覆盖：
button.add-to-cart:disabled:hover,
button.add-to-cart:disabled:focus,
button.add-to-cart:disabled:active {
background-color: #cccccc;
transform: none;
cursor: not-allowed;
}
- 禁用态不该有任何悬停动画，否则误导用户“还能点”
- 务必加
cursor: not-allowed，这是最直接的视觉提示 - 如果用的是
<a></a>标签模拟按钮，不能用disabled，得靠pointer-events: none+ 类名控制样式
