演示

Question

我正在更改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">

Answer 1

您可以使用CSS并避免完全使用mouseover和mouseout事件……这可能更有效。下面的示例使用CSS :hover来更改背景图像，同时还应用过渡效果。

如果您确实要使用mouseover事件，则可以更改使用.css("background-image", ...)来更改背景图像，而不是在CSS中进行设置。

希望这会有所帮助

演示

img {
  transition: all 0.2s;
  background-image: url('https://via.placeholder.com/150/0000FF');
  width: 150px;
  height: 150px;
}

img:hover {
  background-image: url('https://via.placeholder.com/150/FF0000');
}

<img>

如何在mouseover和mouseout事件上添加过渡

1 个答案:

演示