html - 如何在 Bootstrap 的旋转木马顶部添加播放按钮？

Question

我正在使用 Bootstrap 的旋转木马进行幻灯片放映，以便预览我的一些视频。我想在幻灯片顶部添加一个播放按钮，悬停时不透明度会发生变化。 (该按钮不可点击，因为 href 在幻灯片图片上。它只是在这里向我的用户表明它是一个播放器。)

但我无法让我的 div 在所有内容之上显示按钮。这是我的代码:

<div class="carousel slide">
   <div class="carousel-inner">
      <div class="item active"><a href="popup_video1.htm"><img src="thumbnail1.jpg" /></a></div>
      <div class="item"><a href="popup_video2.htm"><img src="thumbnail2.jpg" /></a></div>
      <div class="item"><a href="popup_video3.htm"><img src="thumbnail3.jpg" /></a></div>
   </div>
   <a class="carousel-control left" href=".carousel" data-slide="prev">&nbsp;</a>
   <a class="carousel-control right" href=".carousel" data-slide="next">&nbsp;</a>
</div>

这是我的 CSS(它用得少，但你明白了):

.carousel {
width: 292px;
height: 163px;

  .playBtn {
    width: 292px;
    height: 163px;
    position: relative;
    opacity: 0.8;
    background-image: url('play_btn.png');
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 999;

      &:hover{
        opacity: 1;
      }
  }

  img {
    width: 100%;
    height: 100%;
  }

  a.carousel-control {
    margin-top: 0;
    top: 0;
    right: 0;
    background: none;
    border: 0;
    width: 60px;
    height: 163px;

    &:hover.right {
      background-repeat: no-repeat;
      background-image: url('right_arrow.png');
    }

    &:hover.left {
      background-repeat: no-repeat;
      background-image: url('left_arrow.png');
    }
  }
}

(请注意，我的播放按钮不是幻灯片的播放/暂停按钮。)

我应该把我的 <div class"playBtn"></div> 放在哪里？ ？

Answer 1

尝试使用 position: absolute，就像轮播控件一样，并在标记中类似地放置播放按钮。您不需要弄乱 z-index(此外，如果您真的与其他具有 z-indices 的 Bootstrap 元素发生冲突，它们开始为 1000)。 p>

如果您希望播放按钮的不透明度根据它自己的 :hover 改变，那么您将不得不处理将它生成的其他鼠标事件(即点击)传递到相关元素。否则，如果您希望它的不透明度根据另一个元素的 mouseenter 事件(例如，悬停在幻灯片上的任何位置)而改变，您可以给播放按钮 pointer-events:none ，并在事件处理程序中切换一个类。