CSS中的hover事件是一種非常實(shí)用的交互方式，它可以讓用戶在鼠標(biāo)懸停時(shí)觸發(fā)一些特定的動(dòng)作，比如更換圖片，如何在CSS中使用hover事件來(lái)更換圖片呢？

我們需要準(zhǔn)備兩張圖片，一張是原始圖片，另一張是鼠標(biāo)懸停時(shí)要顯示的圖片，我們可以使用CSS的hover偽類來(lái)定義鼠標(biāo)懸停時(shí)的樣式。

下面是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="image-container">
  <img class="image" src="original.png" alt="Original Image">
</div>

CSS代碼：

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-container:hover .image {
  background: url(hover.png) no-repeat;
}

在這個(gè)示例中，我們定義了一個(gè)名為.image-container的容器，其中包含一個(gè)名為.image的圖片，在CSS中，我們使用:hover偽類來(lái)定義鼠標(biāo)懸停時(shí)的樣式，當(dāng)鼠標(biāo)懸停在容器上時(shí)，圖片將被替換為名為hover.png的圖片。

這個(gè)示例僅適用于支持CSS3的瀏覽器，如果您需要支持較老的瀏覽器，您可能需要使用JavaScript或jQuery等JavaScript庫(kù)來(lái)實(shí)現(xiàn)相同的效果。