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开始）。

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

如何在Bootstrap的旋转木马上添加播放按钮？

1 个答案: