CSS。更改悬停外部元素上已有颜色的内部元素的颜色

Question

例如我有：

<style>
.a:hover {
  color: white;
}
.a {
  color: blue;
}
.b {
  color: red;
}
</style>
<div class="a">
  <div>First</div>
  <div class="b">Second</div>
</div>

如何使两个内部div变为彩色：白色而我希望它们是不同颜色而不是悬停？无法弄明白。无论我尝试什么，它都不会改变第二种颜色。

他们两个同时应该变成白色，而不是一行一行。

Answer 1

您可以使用：

.a:hover .b, .a:hover div {
    color: white;
}
.a {
    color: blue;
}
.b {
    color: red;
}

<div class="a">
    <div>First</div>
    <div class="b">Second</div>
</div>

或

.a:hover div{
    color: white;
}
.a {
    color: blue;
}
.b {
    color: red;
}

<div class="a">
    <div>First</div>
    <div class="b">Second</div>
</div>

Answer 2

您可以添加以下内容：

.a:hover, .b:hover {
  color: white;
}

Answer 3

<style>
.a:hover > div{
  color: white;
}
.a {
  color: blue;
}
.b {
  color: red;
}
</style>
<div class="a">
  <div>First</div>
  <div class="b">Second</div>
</div>