实现鼠标悬停时背景色和文字颜色平滑过渡的关键是使用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会自动触发过渡：

立即学习“前端免费学习笔记（深入）”；

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

 .btn:hover {   background-color: #0056b3;   color: #fffdd0; } 

4. 可选：简化transition写法

如果你想让所有可动画的属性都统一过渡，也可以简写为：

 .btn {   transition: all 0.3s ease; } 

但推荐明确列出属性，避免不必要的动画影响性能或其他样式。

基本上就这些。只要在正常状态设置 transition，并在 :hover 中改变 background-color 和 color，浏览器就会自动平滑过渡两者。不复杂但容易忽略的是：必须在原始状态（非 hover）中声明 transition，否则不会生效。