Javascript 如何在mouseover和mouseout事件上添加转换

我正在更改mouseover和mouseout事件的图片。我想在更改图片之间添加过渡。如何添加它

onmouseover-
{document.getElementById("img1").src="images/css-logo.png"}

onmouseout-
{document.getElementById("img1").src="images/html-logo.png"}

html-
<img id="img1" src="images/html-logo.png"  onmouseover="setNewImage()" onmouseout="setOldImage()" alt="logos">

onmouseover-
{document.getElementById（“img1”）.src=“images/css logo.png”}
外出-
{document.getElementById（“img1”）.src=“images/html logo.png”}
html-

您可以使用CSS，完全避免使用

mouseover

和

mouseout

事件。。。这可能更有效。下面的示例使用

CSS

：hover

更改背景图像，同时应用过渡效果

如果您确实想使用

mouseover

事件，您可以更改use

.css（“background image”，…）

来更改背景图像，而不是在css中设置它

希望这有帮助

---

演示

img{
过渡：均为0.2s；
背景图像：url（'https://via.placeholder.com/150/0000FF');
宽度：150px；
高度：150像素；
}
img：悬停{
背景图像：url（'https://via.placeholder.com/150/FF0000');
}