如何在悬停所有部分时变暗

Question

请帮帮我，解释一下我如何在悬停时变暗下面给出的所有 section.The 代码只悬停在其书面文本部分中的一个部分，但我希望所有部分都变暗。

索引：

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

css:

    .promo {
    background-color: rgb(52, 132, 172);
    color: white;
    font-weight: 700;
    line-height: 200%;
    text-align: center;
    padding: 50px;
}

.promo:hover > .overlay {
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.5;
}

Answer 1

尝试将填充添加到覆盖部分。

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

Css:

 .promo {
    background-color: rgb(52, 132, 172);
    color: white;
    font-weight: 700;
    line-height: 200%;
    text-align: center;
}

.promo > .overlay {
  padding: 50px;
}
.promo:hover > .overlay {
    background-color:#000;
    opacity:0.5;
}

codepen

如何在悬停所有部分时变暗

How to darken on hover all section

hover

section508