CSS鼠標(biāo)懸停效果制作

在CSS中，我們可以使用:hover偽類來實現(xiàn)鼠標(biāo)懸停效果，下面是一個簡單的例子：

HTML代碼：

<div class="box">鼠標(biāo)懸停在這里</div>

CSS代碼：

.box {
  width: 200px;
  height: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 200px;
}
.box:hover {
  background-color: #666;
}

在這個例子中，我們定義了一個名為.box的類，這個類有一個背景顏色為#333的div元素，當(dāng)鼠標(biāo)懸停在這個div上時，背景顏色會變?yōu)?666。

你可以根據(jù)自己的需求來調(diào)整這個效果，你可以改變背景顏色、添加過渡效果等，下面是一個添加了過渡效果的例子：

CSS代碼：

.box {
  width: 200px;
  height: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 200px;
  transition: background-color 0.3s ease;
}
.box:hover {
  background-color: #666;
}

在這個例子中，我們添加了一個過渡效果，使得背景顏色的變化更加平滑，你可以嘗試不同的過渡效果和時間來得到你想要的效果。