如何获取图片URL设置为div背景图？悬停切换仅显示首图问题求助

你遇到的核心问题是绑定鼠标事件时，没有正确获取当前悬停的图片元素，导致始终只调用第一张图的地址。以下是两种可行的解决实现：

实现代码示例 #

HTML结构 #

<!-- 缩略图容器 -->
<div class="thumbnails">
  <img src="你的图片1地址" alt="缩略图1">
  <img src="你的图片2地址" alt="缩略图2">
  <img src="你的图片3地址" alt="缩略图3">
</div>
<!-- 用于展示背景的div -->
<div class="bg-display"></div>

基础样式 #

.bg-display {
  width: 600px;
  height: 400px;
  margin-top: 20px;
  /* 设置默认背景图 */
  background-image: url("你的默认背景地址");
  background-size: cover;
  background-position: center;
}

.thumbnails img {
  width: 150px;
  height: 100px;
  margin-right: 10px;
  cursor: pointer;
  object-fit: cover;
}

方案一：遍历绑定事件 #

适合图片数量固定的场景，直接给每个缩略图绑定悬停事件：

const bgDiv = document.querySelector('.bg-display');
const thumbImgs = document.querySelectorAll('.thumbnails img');
// 保存div的原始背景图
const originalBg = bgDiv.style.backgroundImage || getComputedStyle(bgDiv).backgroundImage;

// 给每张缩略图绑定鼠标进入事件
thumbImgs.forEach(img => {
  img.addEventListener('mouseenter', () => {
    // 将当前悬停图片的地址设为div背景
    bgDiv.style.backgroundImage = `url(${img.src})`;
  });
});

// 鼠标移出div时恢复原始背景
bgDiv.addEventListener('mouseleave', () => {
  bgDiv.style.backgroundImage = originalBg;
});

方案二：事件委托 #

更高效的写法，尤其适合后续可能动态添加图片的场景：

const bgDiv = document.querySelector('.bg-display');
const thumbContainer = document.querySelector('.thumbnails');
const originalBg = bgDiv.style.backgroundImage || getComputedStyle(bgDiv).backgroundImage;

// 给父容器绑定事件，通过事件对象判断触发源
thumbContainer.addEventListener('mouseenter', (e) => {
  if (e.target.tagName === 'IMG') {
    bgDiv.style.backgroundImage = `url(${e.target.src})`;
  }
});

bgDiv.addEventListener('mouseleave', () => {
  bgDiv.style.backgroundImage = originalBg;
});

问题原因说明 #

如果之前的代码用了for循环（且使用var声明循环变量），或者在事件回调里固定取了索引0的图片，就会导致所有悬停事件都指向第一张图。上述两种方案都是直接获取当前触发事件的图片元素，从根源上避免了索引绑定错误的问题。

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