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

Question

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

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

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

现在我正试图找到一种方法使图像从一个过渡到另一个(最有可能使用不透明度。)关于如何做到这一点的任何建议？我想不通。

Answer 1

您不能仅通过更改图像的 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>