因此,当使用 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>
关于javascript - 如何在悬停时更改 img src 时添加过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50123604/