mouseleave事件触发时无法隐藏视频导航栏，请求排查代码问题

我在网站中开发了一款视频播放器，希望实现鼠标离开视频区域时隐藏底部navigation导航栏的功能。我编写了一段代码尝试实现该功能，但无法生效：

var navigation = document.getElementById("videoslider").getElementByClassName("navigation");

document.getElementById("videoslider").addEventListener("mouseleave", function() {
    navigation.style.visibility = "hidden";
});

以下是我完整的相关HTML、CSS及JavaScript代码：

<style>
#videoslider{
    position: relative;
    width: 100%;
    height: 75vh;
    z-index: 1;
}

#videoslider video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#videoslider .navigation{
    position: absolute;
    padding: 1px;
    bottom: 0%;
    width: 80%;
    margin-left: 10%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#videoslider .navigation li{
    list-style: none;
    cursor: pointer;
    border-radius: 4px;
    margin: 1px;
    opacity: 0.7;
}

#videoslider .navigation li img{
    transition: 0.5s;
    width: 120px !important;
    height: 70px;
}
#videoslider .navigation li img:hover{
    scale: 1.4;
}

#videoslider .buttonMute{
    color: none;
    border: none;
    border-radius: 10px;
    background-image: url( 'https://felixandstefanproduction.de/wp-content/uploads/2023/01/icon_mute.png' );
    background-size: 30px 30px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    position: absolute;
    padding: 1px;
    bottom: 3%;
    height: 40px;
    width: 40px;
    margin-left: 2%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper {
    width: 100%;
    height: 100%;
    background-image: ;
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 600px) {
      #videoslider .navigation li img{
        transition: 0.5s;
        width: 68px !important;
        height: 40px;
    }
        #videoslider .navigation{
        width: 90%;
        margin-left: 5%;
    }
}
</style>

<section id="videoslider">
    <div id="wrapper" onclick="playPause()">
        <video id="sliderVid" loop playsinline autoplay="true" muted="true">
            <source src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/LoopLoop.mp4">
        </video>
    </div>
    <ul class="navigation">
        <li onclick="videoselector('https://felixandstefanproduction.de/wp-content/uploads/2023/01/Trailer_169_TSVStarnberg_HD_20RF_WO.mp4')"><img src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/Thumb_TSVStarnberg.jpg"></li>
    </ul>
</section>

<script type="text/javascript">
    var sliderVidEl = document.getElementById("sliderVid"); 
    var overlay = document.getElementById("wrapper"); 
    
    function playPause() { 
        if (sliderVidEl.paused) {
             sliderVidEl.play();
             overlay.style.backgroundImage = "";
        } else {
             sliderVidEl.pause();
             overlay.style.backgroundImage = "url('https://felixandstefanproduction.de/wp-content/uploads/2023/01/playOverlay.png')";
        }
    } 
    
    function videoselector(videoLink) {
        sliderVidEl.muted = false;
        overlay.style.backgroundImage = "";
        document.getElementById('sliderVid').src=videoLink;
    }
    
    //Mute button
    $('#sliderVidMute').click(function(){
        if( $("#sliderVid").prop('muted') ) {
          $("#sliderVid").prop('muted', false);
        } else {
            $("#sliderVid").prop('muted', true);
        }
    });
</script>

<script>
    window.onload=function(){
    var navigation = document.getElementByClassName("navigation");

    document.getElementById("videoslider").addEventListener("mouseleave", function() {
        navigation.style.visibility = "hidden";
    });
    document.getElementById("videoslider").addEventListener("mouseover", function() {
        navigation.style.visibility = "visible";
    });
    }
</script>

问题分析 #

你的代码存在以下几个关键问题：

• 方法名称拼写错误：getElementByClassName 应为 getElementsByClassName（注意末尾复数s），原生DOM方法名是固定的，拼写错误会导致方法未定义。
• 返回值类型误用：getElementsByClassName 返回的是HTMLCollection集合，不是单个DOM元素，直接调用 .style.visibility 会抛出错误，因为集合没有该属性。需要从集合中取第一个元素（页面中仅存在一个.navigation）。
• HTML标签未闭合：<ul class="navigation">标签未添加闭合标签</ul>，会导致DOM结构解析异常，可能影响元素获取。
• 事件监听逻辑冗余：两处<script>标签中都有导航栏显示隐藏的代码，容易引发变量作用域冲突。

修正后的代码 #

将最后一段<script>替换为以下代码：

window.onload = function() {
    // 正确获取单个.navigation元素，两种写法二选一
    var navigation = document.getElementById("videoslider").getElementsByClassName("navigation")[0];
    // 更简洁写法：var navigation = document.querySelector("#videoslider .navigation");

    const videoSlider = document.getElementById("videoslider");

    videoSlider.addEventListener("mouseleave", function() {
        navigation.style.visibility = "hidden";
    });
    videoSlider.addEventListener("mouseover", function() {
        navigation.style.visibility = "visible";
    });
}

同时确保HTML中的<ul class="navigation">标签已添加闭合的</ul>。

内容的提问来源于stack exchange，提问作者Stefan Me