javascript - 如何在鼠标悬停和鼠标移出事件上添加过渡

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>