如何在 Bootstrap 的轮播顶部添加播放按钮？答案

【问题标题】：How do I add a play button on top of Bootstrap's carousel?如何在 Bootstrap 的轮播顶部添加播放按钮？
【发布时间】：2012-10-06 10:15:59
【问题描述】：

我正在使用 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>应该放在哪里？

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

尝试使用position: absolute，就像轮播控件一样，并将播放按钮类似地放置在标记中。您不需要与 z-index 混淆（如果您真的与其他具有 z 索引的 Bootstrap 元素发生冲突，它们开始从 1000 开始）。

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

【讨论】：