使用Javascript通过转换更改悬停时的图像

我正在使用JavaScript更改悬停时的图像。但是，使用此css和代码时，两个图像之间的转换并不像预期的那样工作

函数changeImageOnHoverOver（）{
var changeImg=document.getElementById（'change-img'）；
changeImg.setAttribute（“src”https://demotheme.site/prestashop/at_kola_demo/51-large_default/mug-the-best-is-yet-to-come.jpg");
}
函数changeImageOnHoverOut（）{
var changeImg=document.getElementById（'change-img'）；
changeImg.setAttribute（“src”https://demotheme.site/prestashop/at_kola_demo/36-home_default/the-best-is-yet-to-come-framed-poster.jpg");
}

img{
边界半径：8px；
过渡：全部为0.4s；
}

仅适用于。给定当前值、最终值以及从一个属性值转换到另一个属性值所需的时间，CSS渲染引擎能够确定如何从一个属性值“转换”到另一个属性值。图像
src
不是一个可以表示为数字的值，因此您的代码没有任何作用

相反，请使用类似于创建交叉淡入淡出效果的属性。“不透明度”的值从0到1，因此它适用于过渡

此外，如果您希望在鼠标悬停和鼠标移出时产生效果，则不需要JavaScript，只需在鼠标悬停元素时使用CSS应用样式即可。否则，样式将被删除


.container img{
高度：200px；
/*将图像放置在绝对位置可以使它们堆叠在彼此的顶部*/
位置：绝对位置；
左：0；
边界半径：8px；
过渡：不透明度0.4s缓进缓出；
}
/*在顶部图像悬停时更改不透明度，这将
将显示底部图像*/
.容器图像顶部：悬停{
不透明度：0；
}

（src不是其中之一）