将暗覆盖图添加到悬停的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

回答

相关问题