实现鼠标悬停时背景色和文字颜色平滑过渡的关键是使用 css 的transition属性。1. 创建按钮元素：<button class=”btn”> 悬停我 </button>；2. 设置默认样式并为background-color 和 color 添加过渡：.btn {background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }；3. 定义：hover 状态下的样式变化：.btn:hover {background-color: #0056b3; color: #fffdd0;}；4. 可选简化写法：使用 transition: all 0.3s ease 统一过渡所有属性，但推荐明确列出以提升性能。核心要点是在非 hover 状态声明 transition，否则无法触发平滑效果。
要实现鼠标悬停（:hover）时背景色和文字颜色同时平滑过渡，关键在于使用 CSS 的 transition 属性，并为背景色和文字色设置相同的过渡时间。以下是具体实现方法。
1. 基础 html 结构
假设有一个按钮或链接：
<button class=”btn”> 悬停我 </button>
2. 设置默认样式与过渡效果
给元素设置初始的背景色、文字色，并定义哪些属性需要过渡：
.btn {background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; <p>/<em> 关键：为 background-color 和 color 添加过渡 </em>/ transition: background-color 0.3s ease, color 0.3s ease;}</p>3. 定义：hover 状态
当鼠标悬停时，改变背景色和文字颜色，CSS 会自动触发过渡：
立即学习 “ 前端免费学习笔记（深入）”；
.btn:hover {background-color: #0056b3; color: #fffdd0;}4. 可选：简化 transition 写法
如果你想让所有可动画的属性都统一过渡，也可以简写为：
.btn {transition: all 0.3s ease;}但推荐明确列出属性，避免不必要的动画影响性能或其他样式。
基本上就这些。只要在正常状态设置 transition，并在 :hover 中改变 background-color 和 color，浏览器 就会自动平滑过渡两者。不复杂但容易忽略的是：必须在原始状态（非 hover）中声明 transition，否则不会生效。
