Question

我想要做的是让音频控件在页面加载时可见，5秒后淡出，在鼠标悬停时显示，鼠标悬停后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），哪个位于底部（{{1} }}）请注意，您可以为z-index组成任何数字 - 较大的数字位于较低的数字之上。

z-index:0有两个函数 - 第一个在mouseover上触发，第二个在mouseout上触发。

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

鼠标悬停时会出现音频控件，鼠标移除时会逐渐消失

1 个答案: