如何用单个函数实现鼠标悬停切换多张图片src？解决仅首张生效问题

嘿，这个问题我之前帮好几个开发者排查过，大概率是你在选择元素或者事件绑定环节没覆盖到所有图片，让我一步步给你理清楚解决方案：

为什么只有第一张图片生效？ #

常见的坑有两个：

• 你用了document.querySelector('img')，这个方法只会返回匹配的第一个元素，导致只有第一张图片绑定了事件监听；
• 事件绑定的时候没遍历所有图片，只给第一个元素加了事件；或者切换src的函数里，始终操作的是固定的第一张图片，而不是当前悬停的那一个。

通用的解决方案 #

我们可以通过「遍历所有图片+用this指代当前元素+自定义属性存悬停地址」来实现一个复用性极强的函数，代码如下：

HTML 结构 #

给每张图片加一个data-hover-src属性，用来存悬停时要切换的图片地址，不用在JS里硬编码，后期维护更方便：

<img src="default1.jpg" alt="图片1" data-hover-src="hover1.jpg">
<img src="default2.jpg" alt="图片2" data-hover-src="hover2.jpg">
<img src="default3.jpg" alt="图片3" data-hover-src="hover3.jpg">
<img src="default4.jpg" alt="图片4" data-hover-src="hover4.jpg">
<img src="default5.jpg" alt="图片5" data-hover-src="hover5.jpg">

JavaScript 实现 #

// 获取所有需要实现悬停切换的图片
const images = document.querySelectorAll('img');

// 定义通用的悬停处理函数
function handleImageHover(e) {
  const isHoverEnter = e.type === 'mouseenter';
  // 用this获取当前触发事件的图片元素（核心！）
  const originalSrc = this.getAttribute('src');
  const hoverSrc = this.getAttribute('data-hover-src');

  if (isHoverEnter) {
    // 悬停时切换为hover图片
    this.setAttribute('src', hoverSrc);
    // 把原地址存在自定义属性里，方便离开时恢复
    this.setAttribute('data-original-src', originalSrc);
  } else {
    // 离开时恢复原图片
    const storedOriginalSrc = this.getAttribute('data-original-src');
    this.setAttribute('src', storedOriginalSrc);
  }
}

// 遍历所有图片，绑定鼠标进入/离开事件
images.forEach(img => {
  img.addEventListener('mouseenter', handleImageHover);
  img.addEventListener('mouseleave', handleImageHover);
});

关键细节说明 #

• document.querySelectorAll('img')：返回所有匹配的图片节点列表，用forEach就能遍历绑定事件，覆盖所有图片；
• this的使用：事件处理函数里的this会指向当前触发事件的DOM元素，这样就能精准操作悬停的那张图片，而不是固定的某一张；
• 自定义data-*属性：用来存储额外的图片地址信息，符合HTML规范，也让逻辑更清晰，不用在JS里写一堆硬编码的地址。

如果之前你的代码是用getElementById或者querySelector只选了第一个元素，改成querySelectorAll再遍历绑定事件，问题就能解决啦。

内容的提问来源于stack exchange，提问作者M.lora