按钮 hover 闪一下才变色是因为未在默认状态声明 transition，且起始值不明确（如未设 background-color 或用 transparent）；应始终在非 :hover 状态写 transition，并避免使用不可插值属性或 display 等不支持过渡的属性。
按钮 hover 时闪一下才变色，transition 没生效？
常见原因是没给初始状态加 transition，只在 :hover 里写。浏览器只对「有 transition 声明的属性」做过渡，且必须从一个明确值变到另一个明确值。
比如背景色从 background-color: #007bff 变成 #0056b3 才能动；但如果初始没设 background-color（靠继承或默认值），或者用了 transparent 这种非具体色值，过渡就失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终在默认状态（非
:hover）上声明transition，例如：button { transition: background-color 0.2s ease, transform 0.15s ease; } - 避免用
inherit、initial或未定义的颜色/尺寸作为起始值 - 检查是否被其他 CSS 规则覆盖（用浏览器开发者工具看 computed 样式里
transition是否生效）
加了 transition 但按钮还是“跳”而不是“滑”？
本质是用了不支持过渡的属性，或过渡属性不匹配。CSS 中只有「可计算、可插值」的属性才能过渡，比如 opacity、transform、background-color 可以，但 display、height（从 0 到 auto）、font-size（从 unset 开始）不行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: scale(1)→scale(1.05)替代改width/height，性能更好也更可控 - 要隐藏/显示内容，用
opacity: 0+visibility: hidden配合transition: opacity 0.2s，别碰display - 颜色过渡务必用十六进制、rgb 或 hsl 等明确格式，避免
currentcolor在某些场景下无法插值
移动端点按钮没反应，:hover 失效？
触摸设备没有持续的 hover 状态，:hover 通常只在点击瞬间触发（甚至不触发），导致 transition 看不到效果。这不是 bug，是规范行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
:active实现按下反馈：button:active { transform: scale(0.98); }，再配合transition就有按压动画 - 如需统一交互体验，可加一层 JS 监听
touchstart/touchend并切换 class，例如：button.is-pressed { transform: scale(0.98); } - 别依赖纯 CSS 的
:hover做核心反馈，尤其表单按钮——用户需要明确知道“已点中”
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
/* 关键：默认状态就声明 transition */
transition: background-color 0.2s ease, transform 0.15s ease;
}
<p>button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}</p><p>button:active {
transform: translateY(0) scale(0.98);
}过渡本身很简单，难的是判断哪个属性真正支持平滑变化、以及在不同设备上保持一致的反馈节奏。很多人卡在「写了 transition 却看不到动」，其实只是起始值不明确，或选错了过渡属性。
