在CSS中，我們可以通過使用偽類來檢測鼠標的移動，并利用背景圖像來替換圖片，以下是一個簡單的示例，展示了如何在鼠標移動到圖片上時更換圖片：

我們需要準備兩張圖片，假設我們有兩張圖片，分別為image1.png和image2.png，我們將使用CSS的偽類來檢測鼠標的移動，并在鼠標移動到圖片上時更換圖片。

HTML代碼：

<div class="image-container">
  <img src="image1.png" alt="image1" />
</div>

CSS代碼：

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

在這個示例中，我們創(chuàng)建了一個名為.image-container的div，其中包含一個img元素，當鼠標移動到.image-container上時，img元素的背景圖像會替換為image2.png，這樣，當鼠標移動到圖片上時，圖片就會自動更換。

這種方法僅適用于支持CSS背景圖像屬性的瀏覽器，由于背景圖像會覆蓋原有的img元素，因此可能需要調整背景圖像的尺寸和位置，以確保顯示效果符合需求。