在悬停

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>