如何用JavaScript修改鼠标悬停的特定元素src属性（其他元素不改变）

针对你遇到的多个同类名产品卡片中，仅修改当前悬停收藏图标src的问题，提供两种可行方案：

方案一：事件委托（推荐，更高效） #

利用事件冒泡机制，在所有卡片的共同父容器上绑定事件，无需给每个图标单独绑定，适合大量卡片场景：

// 假设所有main-card都包裹在一个class为cards-container的容器中
const cardsContainer = document.querySelector('.cards-container');

// 监听鼠标进入事件
cardsContainer.addEventListener('mouseenter', function(e) {
  // 判断触发事件的元素是否为收藏图标
  if (e.target.classList.contains('FavIcon')) {
    // 替换为悬停状态的图标路径
    e.target.src = 'img/icons/favorite-hover.png';
  }
});

// 监听鼠标离开事件
cardsContainer.addEventListener('mouseleave', function(e) {
  if (e.target.classList.contains('FavIcon')) {
    // 恢复原图标路径
    e.target.src = 'img/icons/favorite.png';
  }
});

方案二：遍历绑定事件 #

直接获取所有收藏图标，遍历后给每个图标单独绑定悬停事件：

// 获取所有收藏图标节点
const favIcons = document.querySelectorAll('.FavIcon');

// 遍历每个图标，绑定事件
favIcons.forEach(icon => {
  icon.addEventListener('mouseenter', function() {
    // this指向当前悬停的图标元素
    this.src = 'img/icons/favorite-hover.png';
  });

  icon.addEventListener('mouseleave', function() {
    this.src = 'img/icons/favorite.png';
  });
});

为什么之前的方法没生效？ #

• getElementById只能返回匹配的第一个元素，因为ID在页面中必须唯一，无法用于多个相同元素；
• querySelectorAll返回的是所有匹配元素的NodeList，需要遍历每个元素并单独绑定事件，若之前未做遍历操作，自然无法触发每个图标的悬停效果。

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