答案：通过CSS的:hover和transition属性可实现列表项背景色平滑渐变。首先构建无序列表，设置默认背景色及transition动画时长与缓动函数，再定义:hover状态下的背景色，鼠标悬停时即触发动效；若使用渐变背景，则需对background属性应用transition以确保动画生效。
要实现CSS列表项在鼠标悬停时背景色平滑渐变的效果，可以结合 :hover 伪类和 transition 属性来完成。这种方式无需JavaScript，简单高效，适用于导航菜单、选项列表等交互场景。
1. 基础HTML结构
假设我们有一个无序列表，每个列表项需要支持悬停渐变效果：
- 列表项 1
- 列表项 2
- 列表项 3
2. 设置基础样式与过渡效果
为列表项设置默认背景色，并通过 transition 定义背景色变化的动画时长和缓动函数：
.list li {padding: 12px 16px;
background-color: #f0f0f0;
transition: background-color 0.3s ease;
border-bottom: 1px solid #ddd;
}
说明：
- transition: background-color 0.3s ease; 表示背景色在0.3秒内平滑过渡，使用ease缓动曲线。
- 可根据需要调整时间（如0.5s）或改为 linear 等其他缓动方式。
3. 使用 :hover 定义悬停状态
当鼠标移到列表项上时，改变其背景色，transition会自动处理渐变动画：
立即学习“前端免费学习笔记（深入）”；
.list li:hover {
background-color: #d0e4ff;
}
此时，鼠标移入和移出都会触发背景色的渐进变化，视觉效果自然。
4. 进阶：使用渐变背景实现更丰富效果
如果希望背景本身就是渐变色，也可以让渐变在悬停时变化。例如从浅灰渐变变为蓝白渐变：
.list li {padding: 12px 16px;
background: linear-gradient(to right, #f8f8f8, #e0e0e0);
transition: background 0.4s ease;
}
.list li:hover {
background: linear-gradient(to right, #c0e4ff, #a0d0ff);
}
注意： 对于渐变背景，需确保 transition 中写的是 background 而非 background-color，否则动画不会生效。
基本上就这些。只要合理使用 :hover 和 transition，就能轻松实现列表项背景色的渐变悬停效果，提升界面交互质感。不复杂但容易忽略细节，比如属性名和过渡时间的设定。
