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

Posted 2023-05-08

【中文标题】使用仅使用 CSS 的外部 div 标签修改 2 x 内部 div 标签

【英文标题】：modify 2 x inner div tags using an outer div tag using only CSS

【发布时间】：2015-09-17 10:11:26

【问题描述】：

<style>
.main_block
.main_block:hover
.headingbackground-color:red
.contentbackground-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?"。请在发布新问题之前进行一些研究。

【参考方案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;