直接为按钮添加:hover伪类并修改color、background-color或border-color可实现悬停变色；需配合transition实现平滑过渡，兼顾可访问性应叠加下划线或缩放等视觉提示，并推荐用CSS变量统一管理颜色。
直接给按钮添加 :hover 伪类，修改 color（文字色）、background-color（背景色）或 border-color（边框色）即可实现悬停变色。
基础写法：单属性颜色切换
最常用的是改变文字或背景色。确保按钮有默认样式，再在 :hover 中覆盖：
-
文字变色：
button { color: #333; } button:hover { color: #007bff; } -
背景变色：
button { background-color: #f8f9fa; } button:hover { background-color: #007bff; color: white; }
平滑过渡效果：加 transition
没有过渡会显得生硬。建议为颜色变化添加 transition：
- 写在默认状态里更稳妥：
button { color: #333; transition: color 0.2s ease, background-color 0.2s ease; } - 支持多个属性同时过渡，用逗号分隔；
ease是缓入缓出，也可用linear或cubic-bezier
兼顾可访问性：别只靠颜色区分
仅靠颜色变化对色觉障碍用户不友好。可叠加其他视觉提示：
立即学习“前端免费学习笔记（深入）”；
- 加下划线（适合文字按钮）：
button:hover { text-decoration: underline; } - 加图标或缩放：
button:hover { transform: scale(1.03); } - 保留足够对比度：悬停后的文字与背景对比度建议 ≥ 4.5:1
进阶技巧：使用 CSS 变量统一管理
便于主题切换和维护。把颜色定义为变量，hover 时重设：
button { --btn-color: #007bff; color: var(--btn-color); transition: color 0.2s; }button:hover { --btn-color: #0056b3; color: var(--btn-color); }- 这样换主题时只需改变量值，无需遍历所有 hover 规则
