ホバー上でdivにダークオーバーレイを追加する

Question

コンテンツを持つ複数のdiv要素があり、ホバーにダークオーバーレイを追加したいとします。

私のhtmlコード：

<div class="main-slider"> 
    <div class="owl-item"> 
     <li class="dark-overlay"> 
      //content 
     </li> 
    </div> 
    <div class="owl-item"> 
     <li class="dark-overlay"> 
      //content 
     </li> 
    </div> 
    <div class="owl-item"> 
     <li class="dark-overlay"> 
      //content 
     </li> 
    </div> 
</ul> 

だから私は、CSSを使用してみてください：

.dark-overlay{ 
    background:rgba(0,0,0,.75); 
    text-align:center; 
    padding:45px 0 66px 0; 
    opacity:0; 
    -webkit-transition: opacity .25s ease; 
} 

.main-slider li:hover { 
    opacity:1; 
} 

をしかし、それは動作しません。

Answer 1

liをdivに設定することはできません。divに置き換えました。私はあなたがどのように見えるかは分かりませんが、これは間違いなくホバー上に暗いオーバーレイを追加します。

あなたが期待していることをもっと説明しない限り、私たちはあなたを助けることができません。

.dark-overlay { 
 
    background: rgba(0, 0, 0, .75); 
 
    text-align: center; 
 
    padding: 45px 0 66px 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity .25s ease; 
 
} 
 

 
.main-slider div.dark-overlay:hover { 
 
    opacity: 1; 
 
}

<div class="main-slider"> 
 
    <div class="owl-item"> 
 
    <div class="dark-overlay"> 
 
     content 
 
    </div> 
 
    </div> 
 
    <div class="owl-item"> 
 
    <div class="dark-overlay"> 
 
     content 
 
    </div> 
 
    </div> 
 
    <div class="owl-item"> 
 
    <div class="dark-overlay"> 
 
     content 
 
    </div> 
 
    </div> 
 
</div>