将暗覆盖图添加到悬停的div
问题描述:
我有几个带有内容的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;
}
但它不工作。
答
您不能有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>
你的HTML格式不正确。只有'ul'可以是'li'元素的父亲。 –
这是你想要做什么? https://codepen.io/anon/pen/JNRZEz –
你有什么工作。当元素被盘旋时,它们会变暗。 – blackandorangecat