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

カルーセル コントロールと同じようにを使用してみてposition: absolute、同様に再生ボタンをマークアップに配置します。いじる必要はありませんz-index(さらに、z インデックスを持つ他の Bootstrap 要素と実際に競合している場合は、それらは 1000から始まります)。

再生ボタンの不透明度を独自の に基づいて変更する:hover場合は、それが生成する他のマウス イベント (つまり、クリック) を関連する要素に渡す必要があります。それ以外の場合、別の要素のイベントに基づいて不透明度を変更したい場合mouseenter(スライドの任意の場所にホバーするなど)、再生ボタンpointer-events:noneを指定し、イベント ハンドラーでクラスを切り替えます。

于 2012-10-06T02:15:59.607 に答える