CSS初级项目如何实现列表项悬停背景色变化 hover与transition怎么用

在CSS初级项目里，让列表项的背景色在鼠标悬停时发生变化，并且带有平滑的过渡效果，是非常基础但实用的交互练习。实现这个功能主要依赖两个东西：一个是:hover伪类，用来捕捉鼠标悬停状态；另一个是transition属性，用来控制样式变化的速度和节奏。

基础HTML结构

我们先准备一个普通的无序列表，作为演示的载体。结构越简单，越容易看清CSS的作用。

<ul class="menu">
  <li>首页</li>
  <li>文章</li>
  <li>关于</li>
</ul>

使用hover与transition实现背景变化

核心思路是给列表项设定默认背景，然后通过:hover改变背景，再用transition让颜色切换变得平滑。下面是一段完整可用的CSS代码。

.menu {
  list-style: none;
  padding: 0;
  width: 200px;
}

.menu li {
  padding: 10px 15px;
  background-color: #f5f5f5;
  /* 添加过渡：背景色在0.3秒内渐变 */
  transition: background-color 0.3s ease;
}

.menu li:hover {
  /* 鼠标悬停时的背景色 */
  background-color: #4caf50;
  color: #fff;
}

代码要点说明

• transition写在li本身而不是:hover里，这样移入和移出都有过渡。
• background-color是过渡属性，如果写成all会连颜色以外其他属性也过渡。
• :hover前面是li，表示只有当鼠标放到具体列表项上才触发，不会整列变化。

常见错误与排查

初学者经常遇到悬停没反应或者没有动画，一般原因如下：

小结

用CSS做列表项悬停背景变化，只要记住li:hover改样式、transition放原状态这两条，就能在初级项目中快速做出舒服的交互。多调整时间和颜色，就能适应不同风格页面。

CSShovertransition修改时间：2026-07-30 11:39:21