尝试向图像添加mouseenter和mouseleave函数

如何解决尝试向图像添加mouseenter和mouseleave函数

我正在尝试向图像添加mouseenter和mouseleave函数。我希望图像的src在发生mouseenter时更改，并在发生mouseleave时更改回。目前，图像的src在dom中正在更改，但图像未更改。图像上还有一个srcset属性，我尝试在mouseenter上进行更改，但我只得到了空白的白色背景。这是我的代码：

document.addEventListener("DOMContentLoaded",function () {
  const img = document.querySelector("#div1 img");

  img.addEventListener("mouseenter",function () {
    img.src = "https://images.unsplash.com/photo-1542826045-6a629cdc8b1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1389&q=80";
    img.setAttribute('srcset','https://images.unsplash.com/photo-1542826045-6a629cdc8b1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1389&q=80')
  })

  img.addEventListener("mouseleave",function () {
    img.src = "https://images.unsplash.com/photo-1598104514968-1bb2c80c5994?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80";
    img.setAttribute('srcset','https://images.unsplash.com/photo-1598104514968-1bb2c80c5994?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80');
  })
})

解决方法

在此处添加它而不是评论，因为该建议有点冗长。

您的图像路径未获取任何图像。我尝试了一些其他有效的图像，它可以工作。参见下面的代码段

img{
 height: 200px;

}

<div id="div1">
  <img src="https://images.unsplash.com/photo-1598382569639-d28c1a9a21da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
</div>

<script>

document.addEventListener("DOMContentLoaded",function () {
  const img = document.querySelector("#div1 img");

  img.addEventListener("mouseenter",function () {
    img.src = "https://images.unsplash.com/photo-1598557334954-f501396943e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80";
    
  })

  img.addEventListener("mouseleave",function () {
    img.src = "https://images.unsplash.com/photo-1598382569639-d28c1a9a21da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80g";
   
  })
})
</script>