如何实现JavaScript或CSS中，当用户鼠标悬停在图像上时自动更换为另一张图片，而在鼠标移开后恢复显示初始图片的效果？

在JavaScript中，你可以通过添加事件监听器来实现这个效果。首先，你需要准备两张图片的HTML引用，然后编写JavaScript代码。下面是一个简单的例子：

<img id="hover-image" src="initial-image.jpg" alt="初始图片">
<img id="hover-image-preview" style="display:none;" src="hover-image.jpg" alt="悬停时的图片">

<script>
// 获取元素
var img = document.getElementById('hover-image');
var previewImg = document.getElementById('hover-image-preview');

// 添加mouseover和mouseout事件处理函数
img.addEventListener('mouseover', function() {
  // 鼠标悬停时隐藏原图，显示预览图
  img.style.display = 'none';
  previewImg.style.display = 'block';
});

img.addEventListener('mouseout', function() {
  // 鼠标移出时隐藏预览图，显示原图
  previewImg.style.display = 'none';
  img.style.display = 'block';
});
</script>

在CSS中，你可以直接通过CSS伪类`:hover`来实现，但这种方法更适用于静态切换，因为它不会触发JavaScript事件。如果你需要动态切换，还是推荐使用JavaScript。

#hover-image {
  transition: opacity 0.5s;
}

#hover-image:hover {
  opacity: 0;
  pointer-events: none; /* 让背景不可点击 */
  background-image: url(hover-image.jpg); /* 使用新的背景图 */
}