CSS鼠標(biāo)切換圖是一種在網(wǎng)頁設(shè)計中常見的交互效果，它可以讓用戶在鼠標(biāo)懸?；螯c擊時切換不同的圖片，這種效果可以通過CSS的偽類來實現(xiàn)，hover、:active等。

下面是一個簡單的例子，展示了如何使用CSS實現(xiàn)鼠標(biāo)切換圖的效果：

HTML代碼：

<div class="image-container">
  <img class="image" src="image1.jpg" alt="Image 1">
  <img class="image" src="image2.jpg" alt="Image 2">
  <img class="image" src="image3.jpg" alt="Image 3">
</div>

CSS代碼：

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
.image-container:hover .image {
  opacity: 1;
}

在這個例子中，我們使用了三個圖片，每個圖片都放在一個名為image-container的div中，每個圖片都設(shè)置了一個偽類，hover，表示當(dāng)鼠標(biāo)懸停在該圖片上時，該圖片將變?yōu)榭梢姡覀冞€使用了CSS的過渡效果，讓圖片的切換更加平滑。

這只是一個簡單的例子，你可以根據(jù)自己的需求進行調(diào)整和擴展，你可以添加更多的圖片，或者調(diào)整圖片的大小和位置，你也可以使用JavaScript來編寫更復(fù)雜的交互效果，但無論如何，CSS鼠標(biāo)切換圖是一種非常實用的交互效果，可以讓你的網(wǎng)頁更加生動有趣。