如何在悬停时更改 img src 时添加过渡？

所以我尝试使用 javascript 在原始图像悬停时添加不同的图像。我的语法与此类似，效果很好。

function imgHover() {
    projectImage.src = '../img/img1.png';
}
function imgHover2() {
    projectImage.src = '../img/img2.png';
}

projectImage.addEventListener('mouseover', imgHover); 
projectImage.addEventListener('mouseleave', imgHover2); 

现在我正在尝试找到一种方法使图像从一个图像过渡到另一个图像（最有可能使用不透明度）。关于如何执行此操作有什么建议吗？我想不通。

您无法仅更改图像的 src 标签来创建过渡效果。

一种方法是创建两个绝对重叠的图像，其中顶部图像的不透明度为 0。

如果您需要动态更改悬停图像，您仍然可以通过 JavaScript 来完成。

.image-wrapper {
  position: relative;
}
.image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.image-hover:hover {
  opacity: 1;
}

<div class="image-wrapper">
  <img src="http://via.placeholder.com/350x150?text=normal" class="image" alt="normal" />
  <img src="http://via.placeholder.com/350x150?text=hover" class="image-hover" alt="hover" />
</div>