音频控件在mouseover上显示，在mouseout上淡出

Audio controls appear on mouseover and fade away on mouseout

本文关键字：mouseout 淡出 显示 mouseover 音频 控件      更新时间：2023-09-26

我想做的是使音频控件在页面加载时可见，在5秒钟后淡出，在悬停/鼠标悬停时出现，在鼠标悬停后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:relative，才能使position:absolute在其他两个框中工作。position-absolute使两个框一个在另一个的顶部，所以我也用z-index告诉它哪个框在顶部（z-index:1），哪个在底部（z-index:0）注意，你可以为z索引组成任何数字-较大的数字在较低的数字之上

hover()具有两个函数——第一个函数在mouseover上触发，第二个函数在mouseout上触发。

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

相关文章：