호버 켜기 모든 부분을 어둡게하는 방법

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