Question

所以我为HTML5视频播放器创建了自定义按钮/图标。问题是，当鼠标没有指向视频时，我想隐藏这些按钮，除了进度条。

我已经使用过css：hover，但是当我直接使用它时它只显示按钮，但是我希望当鼠标在视频容器上时显示它们，进度条应该保留。

#video-controls {
  opacity: 0;
}

#video-controls:hover {
  opacity: 1;
}

此外，是否有人知道如何在按钮未显示时将进度条向下移动到底部？

<div id="video_container">
    <video id="video">
        <source src="video_new.mp4" type="video/mp4">
        <source src="video_new.ogg" type="video/ogg">
    </video>
  <div id="video-controls">
    <button type="button" id="play-pause"><input type="image" src="icons/play.png" alt="play button icon"></button>

    <button type="button" id="mute"><input type="image" src="icons/volume_on.png" alt="volume ON icon"></button>
    <button type="button" id="full-screen"><input type="image" src="icons/fullscreen.png" alt="fullscreen button icon"></button>
    <div><span id="currentTime">00:00</span></div><div id="duration"><span>00:00</span></div>
    </div>
 <progress id="progress" value="0">
   <span id="progress-bar"></span>
 </progress>
</div>

Answer 1

:hover上的#video-controls代替#video_container上的#video_container:hover #video-controls { opacity: 1; }。

所以试试这个：

$scope

以下是一个示例：https://jsfiddle.net/4h9jkrLz/1/

显示/隐藏HTML5视频播放器控件

1 个答案: