html - 当我将鼠标悬停在测试类上时，左侧类的颜色没有改变

Question

当我将鼠标悬停在类“test”的文本上时，我想更改类“left”的 div 的颜色，但是当我这样做时没有任何反应，有没有办法解决这个问题？

我尝试使用“left”类从 div 中删除“side”类，但没有达到预期效果

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

.title:hover {
  color: red;
}

.left {
  background-color: green;
  width: 100px;
  height: 20px;
}

.title:hover+.left {
  background-color: red;
}

<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>

Answer 1

+ 是直接同级选择器，.left 不是 title 的同级选择器。您可以尝试新的:has选择器:

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

.title:hover {
  color: red;
}

.left {
  background-color: green;
  width: 100px;
  height: 20px;
}

body:has(h1.title:hover) div.sides>div.left {
  background-color: red;
}

<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>