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

Audio controls appear on mouseover and fade away on mouseout

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

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

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

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

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