如何用单个函数实现多张图片的鼠标悬停切换效果？

嘿，这个需求我之前做过类似的！其实核心就是把重复的逻辑抽出来，利用事件对象或者元素的关联属性来复用同一个函数，不用给每张图单独写处理函数。给你几个具体的方向：

思路1：事件委托（最推荐） #

把鼠标事件绑定到所有图片的父容器上，而不是每张图单独绑定。这样不管你有5张还是50张图，只需要一个事件处理函数就行。

步骤大概是：

• 给所有图片的父元素加个类，比如<div class="image-group">，里面放所有需要切换的图片
• 给每张图片自定义data属性，存好hover状态的图片地址，比如<img src="original1.jpg" data-hover="hover1.jpg" alt="图1">
• 写单个处理函数，通过event.target拿到当前触发事件的图片，然后切换src

示例代码：

// 绑定父容器的mouseover和mouseout事件
document.querySelector('.image-group').addEventListener('mouseover', handleImageToggle);
document.querySelector('.image-group').addEventListener('mouseout', handleImageToggle);

function handleImageToggle(e) {
  // 确保触发事件的是图片元素
  if (e.target.tagName !== 'IMG') return;
  
  const currentImg = e.target;
  // 根据事件类型切换图片
  if (e.type === 'mouseover') {
    // 先存一下原始地址，不然mouseout的时候找不到了
    currentImg.dataset.original = currentImg.src;
    currentImg.src = currentImg.dataset.hover;
  } else {
    currentImg.src = currentImg.dataset.original;
    // 可以删掉临时存的属性，也可以留着下次用
    delete currentImg.dataset.original;
  }
}

思路2：循环绑定同一个函数 #

如果不想用事件委托，也可以选中所有需要切换的图片，循环给它们绑定同一个处理函数。

步骤：

• 给所有需要切换的图片加同一个类，比如hover-img
• 用querySelectorAll选中所有这类图片
• 循环给每张图绑定mouseover和mouseout事件，都用同一个处理函数

示例代码：

const hoverImages = document.querySelectorAll('.hover-img');

// 循环绑定事件
hoverImages.forEach(img => {
  img.addEventListener('mouseover', handleHover);
  img.addEventListener('mouseout', handleHover);
});

function handleHover(e) {
  const img = e.target;
  // 同样用data属性存hover地址
  if (e.type === 'mouseover') {
    img.dataset.original = img.src;
    img.src = img.dataset.hoverSrc;
  } else {
    img.src = img.dataset.original;
  }
}

关键提示 #

• 一定要用自定义data属性来存每张图的切换地址，不要在函数里硬编码图片路径，不然函数就失去复用性了
• 记得处理mouseout事件还原图片，不然鼠标移开后图片不会变回去
• 如果不用event.target，也可以用this（处理函数用普通函数，不要用箭头函数），比如this.src = this.dataset.hoverSrc，效果是一样的

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