使用仅使用 CSS 的外部 div 标签修改 2 x 内部 div 标签答案

【问题标题】：modify 2 x inner div tags using an outer div tag using only CSS使用仅使用 CSS 的外部 div 标签修改 2 x 内部 div 标签
【发布时间】：2015-09-17 10:11:26
【问题描述】：

<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>

只要只使用 CSS 将鼠标悬停在 main_block 上，我想将标题 div 更改为 background-color:orange 并将内容 div 更改为 background-color:yellow

【问题讨论】：

欢迎来到 SO！您正在寻找的是之前讨论过的:hover 选择器，请查看以下问题："How to use 'hover' in CSS" 或"div hover background-color change?"。请在发布新问题之前进行一些研究。

标签： html css css-transitions

【解决方案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>

【讨论】：

我不敢相信事情就这么简单。谢谢你的帮助。看似最难的问题往往有最简单的答案。

【解决方案2】：

您可以像这样在 LESS 或 SASS 中执行此操作。

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

}

【讨论】：