利用CSS :hover伪类可实现按钮悬停时背景色和文字颜色的动态变化，提升交互体验。1. 通过定义button默认样式和button:hover悬停样式，实现颜色切换；2. 添加transition属性使颜色过渡更自然，推荐时长0.2s至0.4s；3. 可扩展边框、阴影、字体粗细等样式增强反馈感，如悬停时添加边框和box-shadow浮起效果；4. 注意可访问性与视觉舒适度，合理运用提升界面友好性。
当用户将鼠标指针移动到按钮上时，利用CSS的 :hover 伪类可以轻松实现背景色和文字颜色的动态变化，提升界面交互体验。只需在CSS中为按钮元素定义普通状态和悬停状态的样式即可。
基本语法与结构
:hover 是一种动态伪类，应用于用户将光标移到元素上方时触发。常用于按钮、链接等可交互元素。
示例代码：
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
button:hover {
background-color: #0056b3;
color: #fff;
}
上述代码中，按钮默认为蓝色背景、白色文字；悬停时背景变深蓝，文字保持白色。
使用 transition 平滑过渡
直接切换颜色会显得生硬，加入 transition 属性可让颜色变化更自然。
立即学习“前端免费学习笔记（深入）”；
关键点：- 设置
transition可控制背景和文字颜色的变化时长 - 推荐使用 0.2s 到 0.4s 的时间间隔，视觉效果舒适
- 可对不同属性设置不同过渡时间（如
background-color 0.3s, color 0.2s）
常见应用场景与技巧
除了基础颜色变化，还可结合其他样式增强效果。
- 改变边框：悬停时添加或变色边框，突出按钮状态
- 调整文字大小或粗细：轻微放大字体或加粗，增强反馈感
- 配合阴影：使用
box-shadow添加浮起效果
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: 2px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-color: white;
color: #007bff;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
基本上就这些，通过 :hover 调整背景和文字颜色是前端开发中最常用也最直观的交互方式之一，不复杂但容易忽略细节，比如过渡动画和可访问性。合理运用能让界面更友好。
