如何实现Div元素互悬停背景切换的一致性？

嘿，我一眼就看穿问题出在哪啦！你用的+是CSS相邻兄弟选择器，它有个硬限制：只能选中当前元素紧跟在后面的那个兄弟元素。

看你的HTML结构：

<div id="left">Content</div>
<div id="right">Content</div>

#left在#right前面，所以#left:hover + #right能正常匹配到后面的#right；但#right:hover + #left完全找不到对应的元素——#left在#right的前面，根本不是它的“下一个兄弟”，这条规则自然相当于没写～

下面给你两种可行的解决思路，按需选就行：

方案1：纯CSS（推荐，现代浏览器友好） #

方法A：用:has()选择器（最简洁） #

:has()是CSS的父选择器，能检测子元素的状态，从而选中其他兄弟元素，现在主流浏览器都支持：

/* 鼠标悬停#left时，设置#right的背景 */
:has(#left:hover) #right {
  background-image: url('working image url');
}

/* 鼠标悬停#right时，设置#left的背景 */
:has(#right:hover) #left {
  background-image: url('working image url');
}

不用改你的HTML结构，直接替换原来的CSS就搞定。

方法B：用CSS变量（兼容稍旧浏览器） #

如果要兼容不支持:has()的浏览器，用CSS变量结合容器也能实现：
先给两个div加个容器：

<div class="box-container">
  <div id="left">Content</div>
  <div id="right">Content</div>
</div>

再写对应的CSS：

.box-container {
  /* 定义初始背景变量 */
  --left-bg: initial;
  --right-bg: initial;
}

/* 悬停#left时，更新#right的背景变量 */
#left:hover {
  --right-bg: url('working image url');
}

/* 悬停#right时，更新#left的背景变量 */
#right:hover {
  --left-bg: url('working image url');
}

/* 给两个div应用变量 */
#left {
  background-image: var(--left-bg);
}
#right {
  background-image: var(--right-bg);
}

方案2：JavaScript（兼容所有浏览器） #

如果要兼容非常老旧的浏览器，用JS监听鼠标事件是最稳妥的：

const leftDiv = document.getElementById('left');
const rightDiv = document.getElementById('right');
const hoverImageUrl = "url('working image url')";

// 监听#left的鼠标进入/离开事件
leftDiv.addEventListener('mouseenter', () => {
  rightDiv.style.backgroundImage = hoverImageUrl;
});
leftDiv.addEventListener('mouseleave', () => {
  rightDiv.style.backgroundImage = 'initial';
});

// 监听#right的鼠标进入/离开事件
rightDiv.addEventListener('mouseenter', () => {
  leftDiv.style.backgroundImage = hoverImageUrl;
});
rightDiv.addEventListener('mouseleave', () => {
  leftDiv.style.backgroundImage = 'initial';
});

这个方法不用改HTML，直接加这段JS代码就OK。

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