音頻控件出現在鼠標懸停上，並在鼠標懸停時消失

我想要做的是讓音頻控件在頁面加載時可見，5秒後淡出，鼠標懸停/鼠標懸停時出現並在鼠標懸停5秒後淡出。完全像YouTube的控制欄的作品。音頻控件出現在鼠標懸停上，並在鼠標懸停時消失

謝謝先進。

<audio controls> 
 
    <source src="horse.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio>

來源

2016-05-19 beck5

歡迎堆棧溢出。你需要告訴我們你已經嘗試了什麼。自定義控件或只是默認的控件？ – PHPglue

@gibberish我會，但我什麼都沒有，但只有最低限度，所以我沒有想到發佈它 – beck5

@PHPglue默認 – beck5

$(document).ready(function(){ 
 
    $('#audio-placeholder').hover(
 
     function(){ 
 
     //runs on mouseover 
 
     $('#audio-controls').fadeIn(); 
 
     }, 
 
     function(){ 
 
     //runs on mouseout 
 
     hideAudioControls(); 
 
     } 
 
    ); 
 
    hideAudioControls(); //runs at startup 
 
}); 
 

 
function hideAudioControls(){ 
 
    setTimeout(function(){ 
 
    $('#audio-controls').fadeOut(); 
 
    },3000); 
 
}

div{position:relative;} 
 
.audio-inner{position:absolute;top:0;left:0;} 
 
#audio-controls{background:white;z-index:1;} 
 
#audio-placeholder{width:300px;height:20px;padding-top:10px;text-align:center;z-index:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="audio-container"> 
 
    <div id="audio-controls" class="audio-inner"> 
 
    <audio controls> 
 
     <source src="horse.mp3" type="audio/mpeg"> 
 
     Your browser does not support the audio element. 
 
    </audio> 
 
    </div> 
 
    <div id="audio-placeholder" class="audio-inner"> 
 
    Hover here for controls 
 
    </div> 
 
</div>

注：

基本上，有一個盒，它包含其他兩盒（音頻容器）。

對於position:absolute，音頻容器盒的樣式必須爲position:relative，以在其他兩個盒子中工作。 position-absolute使兩個盒子一個在另一個之上，所以我還用z-index來告訴它哪個盒子在頂部（z-index:1），哪個在底部（z-index:0）請注意，您可以組成任意數量的z-index - 數字越大，數字越小。

hover()需要兩個函數 - 第一次觸發mouseover，第二次觸發mouseout。

的JavaScript代碼使用jQuery的，所以你必須在文檔中引用它（如示例代碼中完成。）

來源

2016-05-19 16:40:08 gibberish

非常感謝。我只是想知道如何實現jQuery。是否與外部CSS類似？ – beck5

完全像上面的例子。你可以在你身體的任何地方放置那個腳本標籤，但是大多數人會把它放在身體的盡頭，就在''標籤之前（這可能是最佳的），或者是頂部（在' '標籤）之間''''標籤也很受歡迎。 – gibberish

哦，我解決了它。大聲笑，我鏈接到本地版本的jquery _itself_（ajax.googleapis.com）以前從未與jquery一起工作過，但是一旦我意識到我在做它應該如此工作。感謝你的幫助。 – beck5

音頻控件出現在鼠標懸停上，並在鼠標懸停時消失

回答

相關問題