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

ccgok5k5 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(167)

当我用类'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>

css

来源：https://stackoverflow.com/questions/75700713/color-of-the-left-class-isnt-changing-when-i-hover-over-the-test-class

2条答案

按热度按时间

k3fezbri1#

+是直接同级选择器，而.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>

赞(0）回复(0）举报 2023-03-14

t3psigkw2#

您可以在此链接中找到答案：[https：//developer.mozilla.org/en-US/docs/Web/CSS/：has]

赞(0）回复(0）举报 2023-03-14