写一个好看的hover过度效果 只改变背景颜色

好的，以下是一个简单的hover过度效果，只改变背景颜色，可以通过CSS3的transition和background-color属性实现：

HTML代码：

<div class="box">
  <h3>Title</h3>
  <p>Description</p>
</div>

CSS代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #ddd;
  color: #333;
  text-align: center;
  transition: background-color 0.5s;
}

.box:hover {
  background-color: #555;
  color: #fff;
}

解释：

1. .box是一个宽度和高度都为200px的盒子，背景色为浅灰色，文字颜色为深灰色，居中对齐，用于显示标题和描述文字。
2. 当鼠标移入.box时，盒子的背景颜色会从浅灰色渐变为深灰色，文字颜色也会变为白色，实现了一个简单的hover过度效果。

这个效果可以根据实际需求进行修改和扩展，比如改变文字样式、增加盒子边框效果等等。