如何加深悬停所有部分

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