父母徘徊时将样式应用于子元素

Question

我有四个div，我想在悬停时更改父div中三个孩子的背景颜色。

我希望当悬停父div时，改变＃a，＃b和#c的背景颜色，每种颜色都不同。

非常感谢任何帮助。

#a {
  background: #174259;
  height: 450px;
  width: 450px;
  display: flex;
  margin: auto;
}

#b {
  background: #C32525;
  height: 350px;
  width: 350px;
  display: flex;
  margin: auto;
}

#c {
  background: #FCC459;
  height: 250px;
  width: 250px;
  display: flex;
  margin: auto;
}

.parent>#a:hover {
  background: green;
}

<div class="parent">
  <div id="a">
    <div id="b">
      <div id="c">
      </div>
    </div>
  </div>
</div>

Answer 1

您希望在悬停父级时更改所有子元素的背景颜色。

但在您的代码中，您正在将void应用于孩子：

:hover

这会将你的风格范围限制在一个特定的孩子徘徊时。

相反，将.parent > #a:hover { background: green; } 应用于父级，因此在悬停时，所有子级都可以同时定位：

:hover

.parent:hover > #a {
  background: green;
}

.parent:hover #b {
  background: blue;
}

.parent:hover #c {
  background: gray;
}

#a {
  background: #174259;
  height: 450px;
  width: 450px;
  display: flex;
  margin: auto;
}

#b {
  background: #C32525;
  height: 350px;
  width: 350px;
  display: flex;
  margin: auto;
}

#c {
  background: #FCC459;
  height: 250px;
  width: 250px;
  display: flex;
  margin: auto;
}

.parent:hover>#a {
  background: green;
}

.parent:hover #b {
  background: blue;
}

.parent:hover #c {
  background: gray;
}