1

我正在使用 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>？

4

1 回答 1

0

Try using position: absolute, just like the carousel controls, and place the play button similarly in the markup. You shouldn't need to mess with z-index (besides if you were really in conflict with other Bootstrap elements with z-indices, they start at 1000).

If you want the play button's opacity to change based on it's own :hover, then you're going to have to deal with passing other mouse events it generates (i.e., clicks) onto the relevant elements. Otherwise, if you want it's opacity to change based on another element's mouseenter event (e.g., hovering anywhere on the slide), you could give the play button pointer-events:none, and toggle a class in the event handler.

于 2012-10-06T02:15:59.607 回答