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

发布于03月11日

当我用类‘test’悬停在文本上时，我想用类‘Left’更改div的 colored颜色，但当我这样做时，什么都没有发生，有什么方法可以解决这个问题吗？

我try 从带有‘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>

推荐答案

+是直接同级 Select 器，而.left不是title的同级.不过，你可以try 一下新的:has Select 器:

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