直接用:hover伪类即可实现按钮悬停变色，需确保按钮为可交互元素（如<button>），同时修改背景色与文字色以保障对比度，并在常态样式中定义transition实现平滑过渡。
怎么用CSS实现鼠标悬停按钮变色
直接给按钮加 :hover 伪类就行，不用JS，纯CSS最轻量也最可靠。关键不是“能不能”，而是“怎么写才不翻车”。
- 必须确保按钮是可交互元素（比如
<button>或带role="button"的<div>），否则部分浏览器可能不触发:hover - 颜色变化别只改文字色——同时改背景色和文字色，不然对比度可能不达标（尤其深色背景上白字悬停变浅灰）
- 别用
!important硬覆盖，优先靠选择器权重解决冲突，比如用button:hover比.btn:hover权重高
初学者最容易写的三行有效代码
下面这段可以直接复制进HTML的 <style> 标签里，改完就能看到效果：
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
}
button:hover {
background-color: #45a049;
color: #fff;
}
注意：这里用了相近色阶（#4CAF50 → #45a049），视觉过渡自然；没加 transition 是为了降低初学门槛，但实际项目中建议补上 transition: background-color 0.2s; 防止突变。
为什么点击后按钮颜色卡住不恢复
这不是悬停问题，是浏览器把按钮记成了“已激活”状态，常见于用 <a> 标签模拟按钮时没重置 :active 或 :visited 样式。
立即学习“前端免费学习笔记（深入）”；
- 如果用
<a href="#">当按钮，加一行a:hover, a:active, a:visited { color: inherit; text-decoration: none; } - 移动端真机上
:hover行为不可靠（没有“悬停”概念），需要额外加:active做兼容，比如button:hover, button:active { background-color: #45a049; } - 某些CSS框架（如Bootstrap）会自带
:hover样式，直接覆盖时要检查开发者工具里哪条样式被划掉了
要不要加 transition 动画
要，但得控制好参数。初学者常犯的错是写成 transition: all 0.3s; —— 这会让所有属性（包括 font-size、border）都动，反而卡顿或意外变形。
- 只过渡明确要变的属性：
transition: background-color 0.2s ease, color 0.2s ease; - 时间别超过 0.3s，人眼感知延迟明显；低于 0.1s 又像没动，0.2s 是平衡点
- 别在
:hover里再写transition，它只该定义在常态样式里（即button { ... transition: ...; }）
真正容易被忽略的是：悬停效果是否在暗色模式下依然可读。测试时顺手切一下系统偏好，看看 background-color 和 color 在深色背景下是否还够对比。
