利用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 调整背景和文字颜色是前端开发中最常用也最直观的交互方式之一，不复杂但容易忽略细节，比如过渡动画和可访问性。合理运用能让界面更友好。