使用:hover和transition实现列表项背景色平滑过渡，关键在于设置transition属性控制变化时长与缓动类型，并定义默认及悬停状态样式以避免跳变。
要实现列表项在悬停时背景颜色平滑过渡的效果，核心是使用 CSS 的 :hover 伪类结合 transition 属性。下面是一个简单实用的实现方法。
1. 基础HTML结构
假设你有一个无序列表：
- 列表项 1
- 列表项 2
- 列表项 3
2. 设置默认样式与悬停效果
为列表和列表项设置基本样式，并添加背景色过渡动画：
.list {list-style: none;
padding: 0;
margin: 0;
}
.list li {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
border-bottom: 1px solid #eee;
}
.list li:hover {
background-color: #007acc;
color: white;
}
3. 关键点说明
实现平滑过渡的关键在于：
立即学习“前端免费学习笔记（深入）”；
- transition 属性：定义背景色变化的持续时间（如 0.3s）和缓动函数（如 ease），让颜色渐变自然
- hover 状态：鼠标移入时触发 background-color 变化
- 初始状态预设：确保正常状态下背景色明确（如白色或透明），避免跳变
4. 可选增强效果
你可以进一步提升交互体验：
- 过渡多个属性：
transition: background-color 0.3s ease, color 0.3s ease - 使用 CSS 变量统一配色，便于维护
- 配合 padding 或 transform 做轻微缩放，增加动感
