鼠标悬停更换图片是网站常见的交互效果之一，通过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，就可以实现鼠标悬停更换图片的效果，优化页面交互体验。