I try to solve a problem. I have a video player on my website. I want to manipulate some classes i created like the navigation bar on the bottom of the video.

The video player has a navigation bar. I want to hide the navigation bar when my mouse is not above the video:

I try to move hide the navigation list with this:

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

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

I cant make it work. What is wrong here?

<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.getElementById("videoslider").getElementByClassName("navigation");

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

<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%;vide
    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 >
            <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>
    </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>
    
    
    

CodePudding user response：

Use mouseover event to remove the .hidden CSS. The CSS .hidden class should have display: none in it.

.addEventListener("mouseover", (event) => {
  // remove .hidden from your taskbar
}