为何JavaScript的mouseleave在图片间滑动时无法恢复原图？

我一直在找原生JS实现图片悬停切换的示例——鼠标悬停时显示第二张图，离开时恢复原图。自己搭了个示例，顶部标题的mouseover/mouseleave逻辑正常，但下方两张图片的功能出了问题。

之前试过一种不太理想的方案：通过修改容器的innerHTML替换图片，但这种方式会重新创建<img>元素，容易出现视觉闪烁或事件异常。而且已有jQuery的可行方案，但我只想用原生JS解决。

下面是正确的原生JS实现方案：

HTML #

<h4 id="myH4">Original Header</h4>

<!-- 用data属性存储原始图和悬停图地址 -->
<div class="img-container" data-original="https://comic.browserling.com/bytes.png" data-hover="https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg">
  <img src="https://comic.browserling.com/bytes.png" alt="" />
</div>

<div class="img-container" data-original="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" data-hover="https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" alt="" />
</div>

JavaScript #

// 批量处理所有图片容器
const imgContainers = document.querySelectorAll('.img-container');
imgContainers.forEach(container => {
  const img = container.querySelector('img');
  // 从data属性获取图片地址
  const originalSrc = container.dataset.original;
  const hoverSrc = container.dataset.hover;

  // 绑定悬停事件
  container.addEventListener('mouseover', () => {
    img.src = hoverSrc;
  });

  container.addEventListener('mouseleave', () => {
    img.src = originalSrc;
  });
});

// 保留原有标题交互逻辑
const header = document.querySelector('#myH4');
header.style = "background-color: lightgreen; text-align:center;";

header.addEventListener('mouseover', () => {
  header.textContent = 'Mouse Over';
});
header.addEventListener('mousedown', () => {
  header.textContent = 'Mouse Down';
});
header.addEventListener('mouseleave', resetHeader);
header.addEventListener('mouseup', resetHeader);

function resetHeader() {
  header.textContent = "Original Header";
}

为什么这个方案更好 #

• 直接修改<img>的src属性，不会重新创建DOM元素，避免闪烁和事件丢失问题
• 用data-*属性管理图片地址，代码更清晰，后续新增图片只需复制容器结构修改地址即可
• 批量绑定事件，代码更简洁高效

内容的提问来源于stack exchange，提问作者PPL