鼠標懸停更換圖片是網站常見的交互效果之一，通過CSS實現更換圖片可以優化頁面加載速度并改善用戶體驗。

實現該效果，首先需要在HTML中添加待更換圖片和鼠標懸停時顯示的圖片。例如：

<div class="img-container">
<img src="原圖地址" alt="原圖">
<img src="替換圖地址" class="hover-img" alt="替換圖">
</div>

其中，.img-container為包含兩張圖片的容器，.hover-img為鼠標懸停時顯示的圖片。

接下來，可以使用CSS為鼠標懸停時顯示的圖片添加顯示效果。例如：

.hover-img {
display: none;
}
.img-container:hover .hover-img {
display: block;
}

以上代碼中，初始時鼠標懸停時顯示的圖片不可見，通過在.img-container:hover的狀態下將.hover-img的display屬性設置為block使其顯示。

最后，可以為待更換圖片添加鼠標懸停時的效果。例如：

.img-container:hover img:first-child {
opacity: 0.5;
}

以上代碼中，通過在.img-container:hover的狀態下將待更換圖片的opacity屬性設置為0.5實現鼠標懸停時的效果。

綜上所述，通過HTML和CSS，就可以實現鼠標懸停更換圖片的效果，優化頁面交互體驗。