將暗覆蓋圖添加到懸停的div

-1

我有幾個帶有內容的div元素，我希望在懸停時添加深色覆蓋圖。將暗覆蓋圖添加到懸停的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; 
}

但它不工作。

來源

2017-04-24 name name2

你的HTML格式不正確。只有'ul'可以是'li'元素的父親。 –

這是你想要做什麼？ https://codepen.io/anon/pen/JNRZEz –

你有什麼工作。當元素被盤旋時，它們會變暗。 – blackandorangecat

您不能有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>

來源

2017-04-24 20:12:15 blackandorangecat

將暗覆蓋圖添加到懸停的div

回答

相關問題