鼠标悬停类为title的文本时，类为left的Div颜色不变化的修复方案

问题根源 #

你写的CSS选择器.title:hover+.left完全无效，原因是：

• CSS的+是相邻兄弟选择器，只能选中当前元素紧挨着的下一个同级元素
• 你的.left元素在.sides容器内部，和.title既不是同级元素，位置也在.title的前面，CSS根本无法跨父级选中它

修复方法 #

最直接的解决方式是用JavaScript监听鼠标事件，实现跨元素的样式控制：

完整代码示例

<div class="sides">
  <div class="side left"></div>
  <div class="side right"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>
<h1 class="title">Test</h1>

<style>
.title {
  color: blue;
  font-size: 50px;
  transition: 1s;
}

.title:hover {
  color: red;
}

.left {
  background-color: green;
  width: 100px;
  height: 20px;
  transition: background-color 1s; /* 加上过渡让颜色变化更平滑 */
}
</style>

<script>
// 获取目标元素
const titleElement = document.querySelector('.title');
const leftDivElement = document.querySelector('.left');

// 鼠标悬停时修改背景色
titleElement.addEventListener('mouseover', () => {
  leftDivElement.style.backgroundColor = 'red';
});

// 鼠标离开时恢复原背景色
titleElement.addEventListener('mouseout', () => {
  leftDivElement.style.backgroundColor = 'green';
});
</script>

补充说明 #

如果坚持只用CSS实现，唯一的可能是大幅调整HTML结构：比如把.title放到.sides容器内部，并且位置在.left元素之后，然后用CSS的:has()选择器（需浏览器支持）。但这种方法局限性很大，不如JavaScript灵活可靠。

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