如何在Bootstrap的傳送帶上添加播放按鈕？

我使用Bootstrap的旋轉木馬進行幻燈片放映以預覽我的部分視頻。我想在幻燈片頂部添加一個播放按鈕，並在懸停時更改不透明度。（這個按鈕是不可點擊的，因爲href在幻燈片上，它只是向我的用戶展示它是一個播放器。）如何在Bootstrap的傳送帶上添加播放按鈕？

但我無法讓我的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>？

來源

2012-09-07 boby lapointe

嘗試使用position: absolute，就像傳送帶控件一樣，並將標記中的播放按鈕類似地放置。你不應該混淆z-index（除了如果你真的與其他具有z索引的Bootstrap元素衝突，他們在1000開始）。

如果您希望播放按鈕的不透明度根據其自己的:hover進行更改，那麼您將必須處理將其生成的其他鼠標事件（即，點擊）傳遞到相關元素上。否則，如果您希望基於其他元素的mouseenter事件（例如，將鼠標懸停在幻燈片上的任意位置）進行不透明度更改，您可以給播放按鈕pointer-events:none，並在事件處理程序中切換一個類。

來源

2012-10-06 02:15:59 merv

如何在Bootstrap的傳送帶上添加播放按鈕？

回答

相關問題