音频控件在鼠标悬停时出现并在鼠标移开时消失

Question

我想要做的是让音频控件在页面加载时可见，5 秒后淡出，出现在 hover/mouseover 上并在鼠标移开 5 秒后淡出。与 YouTube 控制栏的工作方式完全一样。

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

Answer 1

$(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:relative，position:absolute 才能在其他两个框中工作。 position-absolute 使两个盒子一个放在另一个上面，所以我还使用 z-index 告诉它哪个盒子在上面 (z-index:1) 哪个在底部 (z-index:0) 请注意，您可以为 z-index 组成任何数字 - 较大的数字位于较小的数字之上。

hover() 有两个函数 - 第一个在鼠标悬停时触发，第二个在鼠标移开时触发。

javascript 代码使用 jQuery，因此您必须在文档中引用它（如示例代码中所做的那样）。

音频控件在鼠标悬停时出现并在鼠标移开时消失

Audio controls appear on mouseover and fade away on mouseout

javascript

html

css

audio-player