练习background-image时，hover box2仅box3背景切换生效的问题求助

原因分析 #

你使用的+是相邻兄弟选择器，它只能选中当前元素紧接在后面的第一个兄弟元素。由于#box1在#box2的HTML结构中是前置的，#box2:hover + #box1这个选择器无法匹配到任何元素，因此完全不生效；而#box3在#box2之后，所以能正常触发样式变化。

解决方法 #

方法1：使用CSS :has()选择器（推荐，现代浏览器支持） #

给三个box添加一个父容器，通过父容器检测#box2的hover状态，来控制前后两个box的背景图：

首先调整HTML结构：

<div class="box-container">
  <div id="box1" class="box"></div>
  <div id="box2" class="box">→</div>
  <div id="box3" class="box"></div>
</div>

然后修改CSS触发规则：

.box-container:has(#box2:hover) #box1 {
  background-image: url(left.png);
  transition-duration: 1s;
}

.box-container:has(#box2:hover) #box3 {
  background-image: url(right.png);
  transition-duration: 1s;
}

:has()选择器能让父元素感知子元素的状态，不受子元素在结构中的前后位置限制。

方法2：JavaScript控制（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JS监听hover事件手动切换：

const box2 = document.getElementById('box2');
const box1 = document.getElementById('box1');
const box3 = document.getElementById('box3');

box2.addEventListener('mouseenter', () => {
  box1.style.backgroundImage = 'url(left.png)';
  box3.style.backgroundImage = 'url(right.png)';
});

box2.addEventListener('mouseleave', () => {
  box1.style.backgroundImage = 'url(pre-left.png)';
  box3.style.backgroundImage = 'url(pre-right.png)';
});

方法3：调整HTML结构（布局允许时） #

若可以修改HTML顺序，把#box1放到#box2后面，用CSS的order属性调整视觉位置，再用兄弟选择器：

<div class="box-container">
  <div id="box2" class="box">→</div>
  <div id="box1" class="box"></div>
  <div id="box3" class="box"></div>
</div>

.box-container {
  display: flex;
}
#box1 {
  order: -1; /* 将box1移到视觉最前方 */
}

#box2:hover ~ #box1 {
  background-image: url(left.png);
  transition-duration: 1s;
}

#box2:hover + #box3 {
  background-image: url(right.png);
  transition-duration: 1s;
}

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