鼠标悬停子元素时修改祖父元素背景的实现方案咨询

先看你给出的HTML与CSS结构：

<style>
.background { width: 100%; height: 800px; margin: 0 auto; background-image:url("backimage1.jpg"); background-size: cover; }
</style>
<div class="background">
  <div class="wrapper">
    <div class="box1">
      <span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
      <span class="description">Vrhunski kvalitet naših proizvoda</span>
    </div>
  </div>
</div>

你提到尝试JS时没法定位到祖父元素，其实有几种实用的方案可以解决这个需求，我给你整理几个常用的：

方案一：用closest()直接定位目标祖父元素 #

这是现代浏览器下最简洁的方法，closest()能帮你快速找到当前元素最近的、匹配指定选择器的祖先元素（包含自身）。

const box1 = document.querySelector('.box1');

// 鼠标悬停时切换背景图
box1.addEventListener('mouseover', function() {
  const background = this.closest('.background');
  background.style.backgroundImage = 'url("backimage2.jpg")';
});

// 鼠标离开时恢复原背景图
box1.addEventListener('mouseout', function() {
  const background = this.closest('.background');
  background.style.backgroundImage = 'url("backimage1.jpg")';
});

这个方法兼容性很好，除了IE浏览器不支持，其他现代浏览器都能正常运行。

方案二：逐层遍历父元素（兼容旧版浏览器） #

如果需要兼容IE这类旧浏览器，可以通过parentElement逐层向上查找：

const box1 = document.querySelector('.box1');

box1.addEventListener('mouseover', function() {
  // 先找到wrapper，再往上找它的父元素background
  const background = this.parentElement.parentElement;
  background.style.backgroundImage = 'url("backimage2.jpg")';
});

box1.addEventListener('mouseout', function() {
  const background = this.parentElement.parentElement;
  background.style.backgroundImage = 'url("backimage1.jpg")';
});

不过这个方法有个小缺点：如果后续HTML结构发生变化（比如中间多了一层嵌套），代码就会失效，灵活性不如closest()。

方案三：事件委托（适合多元素场景） #

如果页面上有多个类似的box1元素，用事件委托会更高效，不用给每个元素单独绑定事件：

const background = document.querySelector('.background');

background.addEventListener('mouseover', function(e) {
  // 判断鼠标是否悬停在box1或它的子元素上
  if (e.target.closest('.box1')) {
    this.style.backgroundImage = 'url("backimage2.jpg")';
  }
});

background.addEventListener('mouseout', function(e) {
  if (e.target.closest('.box1')) {
    this.style.backgroundImage = 'url("backimage1.jpg")';
  }
});

这种方法把事件绑定在祖父元素上，通过事件冒泡判断触发源，性能更好，也适配动态生成的元素。

另外，你还可以用CSS变量优化代码，让维护更方便：

.background { 
  width: 100%; 
  height: 800px; 
  margin: 0 auto; 
  --bg-image: url("backimage1.jpg");
  background-image: var(--bg-image); 
  background-size: cover; 
}

然后JS只需要修改这个变量：

box1.addEventListener('mouseover', function() {
  const background = this.closest('.background');
  background.style.setProperty('--bg-image', 'url("backimage2.jpg")');
});

box1.addEventListener('mouseout', function() {
  const background = this.closest('.background');
  background.style.setProperty('--bg-image', 'url("backimage1.jpg")');
});

后续如果有其他地方需要修改背景图，直接操作变量即可，代码逻辑更清晰。

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