本文详解如何使用 javascript 的 mouseover 和 mouseleave 事件动态控制视频播放器底部导航栏的可见性，并修正原始代码中 getelementbyclassname 拼写错误、dom 获取时机不当及样式控制逻辑缺陷。
在构建交互式视频播放器时，常需优化用户体验——例如：当用户将鼠标移出视频区域时自动隐藏导航栏，悬停时再显示，避免遮挡画面。但原代码存在多个关键问题，导致功能失效：
? 常见错误分析
- ❌ getElementByClassName 是不存在的方法（正确为 getElementsByClassName，注意是复数 Elements，且返回 HTMLCollection）；
- ❌ 未检查元素是否存在，也未取索引 [0] 获取首个匹配元素；
- ❌ window.onload 中直接操作 DOM 虽可行，但若脚本置于 且未加 defer，仍可能因 DOM 未就绪而获取失败；
- ❌ 使用 visibility: hidden 会保留占位空间，推荐用 display: none/block 实现真正“隐藏/显示”；
- ❌ 缺少 mouseenter（或 mouseover）的配对显示逻辑，且未处理初始状态。
✅ 正确实现方案
1. 修正 CSS 类定义（推荐语义化控制）
.navigation.hidden {
display: none;
}✅ 优势：解耦样式与逻辑，便于维护；支持 CSS 过渡动画（如添加 transition: opacity 0.3s ease 配合 opacity 控制可实现淡入淡出）。
2. 修复 JavaScript 逻辑（现代、健壮写法）
document.addEventListener('DOMContentLoaded', () => {
const videoSlider = document.getElementById('videoslider');
const navigation = videoSlider?.querySelector('.navigation');
// 安全校验：确保元素存在
if (!videoSlider || !navigation) {
console.warn('视频容器或导航栏元素未找到，请检查HTML结构');
return;
}
// 鼠标进入：显示导航栏
videoSlider.addEventListener('mouseenter', () => {
navigation.classList.remove('hidden');
});
// 鼠标离开：隐藏导航栏
videoSlider.addEventListener('mouseleave', () => {
navigation.classList.add('hidden');
});
// 【可选】初始隐藏（若需默认隐藏）
// navigation.classList.add('hidden');
});3. HTML 结构建议（确保层级正确）
确保 .navigation 是 #videoslider 的直接子元素（当前结构符合），且无 pointer-events: none 等阻止事件的 CSS 干扰：
<section id="videoslider">
<div id="wrapper">...</div>
<ul class="navigation">
<li>...</li>
</ul>
</section>⚠️ 注意事项
- 事件委托慎用：mouseenter/mouseleave 不会冒泡，因此必须绑定在目标容器（#videoslider）本身，而非父级；
- 移动端兼容性：纯鼠标事件在触摸设备上不触发，如需全平台支持，建议补充 touchstart/touchend 逻辑，或改用 focusin/focusout 配合可聚焦元素；
- 防抖优化（进阶）：若导航栏频繁闪动，可加入 setTimeout + clearTimeout 防抖，延迟隐藏（如 500ms 后再隐藏）；
- 无障碍考量：隐藏导航栏时，确保关键操作（如播放/暂停）仍可通过键盘访问（tabindex + 键盘事件）。
✅ 总结
核心在于：用 classList.add/remove('hidden') 替代内联样式操作，配合 mouseenter/mouseleave 事件，并确保 DOM 就绪与元素存在性校验。此举不仅修复了原始语法错误，更提升了代码健壮性、可维护性与可访问性。实际部署前，务必在 Chrome DevTools 中验证元素选择器与事件监听器是否生效（Application → Event Listeners 面板）。
