使用仅使用CSS的外部div标签修改2个内部div标签

Question

<style>
.main_block{}
.main_block:hover{}
.heading{background-color:red}
.content{background-color:blue}
</style>

<div class="main_block">
<div class="heading">
New Product
</div><br>
<div class="content">
This is my new product
</div>
</div>

我想将标题div更改为background-color：orange和content div to background-color：只要使用CSS将鼠标悬停在main_block上时为黄色

Answer 1

瞧！

您需要从main-block开始，隔离其:hover状态，然后通过子元素进行缩小 - 每个元素需要一个规则：

.heading {
  background-color: red
}
.content {
  background-color: blue
}
.main_block:hover .heading {
  background-color: orange
}
.main_block:hover .content {
  background-color: yellow
}

<div class="main_block">
  <div class="heading">
    New Product
  </div>
  <br>
  <div class="content">
    This is my new product
  </div>
</div>

Answer 2

你可以在LESS或SASS中这样做。

.main_block{
&:hover{
        .heading {
            background-color:orange;
        }
        .content {
            background-color:yellow;
        }
}

}