在鼠标悬停在横向图像上时更改中心图像

<div class="image-container">
  <img class="horizontal-image" src="horizontal_image.jpg" alt="Horizontal Image">
  <img class="center-image" src="center_image.jpg" alt="Center Image">
</div>

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
}

.horizontal-image, .center-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

.center-image {
  opacity: 0; /* 初始化时隐藏中心图像 */
}

var container = document.querySelector('.image-container');
var horizontalImage = container.querySelector('.horizontal-image');
var centerImage = container.querySelector('.center-image');

container.addEventListener('mouseenter', function() {
  centerImage.style.opacity = '1'; // 鼠标悬停时显示中心图像
});

container.addEventListener('mouseleave', function() {
  centerImage.style.opacity = '0'; // 鼠标移出时隐藏中心图像
});