在网页视频播放器中，导航栏常用来放置播放控制、标题或设置入口。如果一直显示会遮挡视频内容，因此很多产品选择在鼠标离开视频区域后自动隐藏导航栏，移回时再显示。这种效果用原生JavaScript和CSS就能轻松实现。
实现原理
核心是利用鼠标事件来感知指针是否在视频容器内。我们把导航栏和视频放在同一个容器中，监听这个容器的 mouseleave 事件，触发时给导航栏加上隐藏类；监听 mouseenter 事件，触发时移除隐藏类。CSS中用过渡属性让导航栏平滑移动或淡出。
为什么用 mouseleave 而不是 mouseout
mouseout 会在鼠标从子元素移到另一个子元素时也触发，容易造成闪烁；而 mouseleave 只有在指针真正离开绑定元素时才触发，更适合容器级判断。
完整代码示例
下面是一个可直接运行的HTML示例，包含视频区域、导航栏和脚本逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.video-wrap {
position: relative;
width: 640px;
height: 360px;
background: #000;
}
.nav-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 48px;
background: rgba(0,0,0,0.6);
color: #fff;
line-height: 48px;
padding: 0 16px;
transition: transform 0.3s ease;
}
.nav-bar.hide {
transform: translateY(-100%);
}
</style>
</head>
<body>
<div class="video-wrap" id="wrap">
<div class="nav-bar" id="nav">视频导航栏</div>
<video src="https://ipipp.com/sample.mp4" controls style="width:100%;height:100%;"></video>
</div>
<script>
var wrap = document.getElementById('wrap');
var nav = document.getElementById('nav');
// 鼠标离开视频区域隐藏导航栏
wrap.addEventListener('mouseleave', function() {
nav.classList.add('hide');
});
// 鼠标进入视频区域显示导航栏
wrap.addEventListener('mouseenter', function() {
nav.classList.remove('hide');
});
</script>
</body>
</html>
关键点说明
- 导航栏使用绝对定位覆盖在视频上方，避免影响布局。
- 隐藏类
hide通过transform上移，比直接display:none更平滑。 - 事件绑定在包裹容器上，而不是导航栏本身，确保移出整个视频区才隐藏。
兼容与优化
如果需要在触屏设备生效，可额外监听 touchstart 来做显示切换。另外当视频全屏时，可结合全屏API调整导航栏样式。只要掌握事件绑定和CSS过渡，就能灵活适配各种播放器界面。
JavaScriptmouseleave_eventCSS_transition修改时间：2026-07-28 17:24:23