ホバーを暗くする方法すべてのセクション

Question

私は手を差し上げ、すべてのセクションをホバリングする方法を説明してください。下記のコードは、テキストの書かれたセクション内のセクションだけを示しますが、すべてのセクションを暗くしたい。

インデックス：

<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