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

.main_block{}
.main_块：悬停{}
.标题{背景色：红色}
.content{背景色：蓝色}

新产品


这是我的新产品

我想将标题div更改为背景色：橙色，将内容div更改为背景色：黄色，只要将鼠标悬停在仅使用CSS的主块上

您需要从

主块开始

，隔离其

：hover

状态，然后按子元素缩小范围-以下每个元素都需要一条规则：

。标题{
背景颜色：红色
}
.内容{
背景颜色：蓝色
}
.main_块：悬停。航向{
背景颜色：橙色
}
.main_块：悬停.content{
背景颜色：黄色
}

新产品


这是我的新产品

您可以用更少的时间或类似的SASS来完成此操作

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

---

}

我不敢相信事情竟如此简单。谢谢你的帮助。通常看起来最难的问题都有最简单的答案。欢迎来到这里！您要查找的是以前讨论过的

：悬停

选择器，请查看以下问题：或。请在发布新问题之前做一些研究。

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

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