jQuery mouseleave-mouseenter仅在第一个元素中工作

我努力尝试在几个视频中设置mouseenter和mouseleve事件。一切似乎都很完美,当我moouseenter播放视频并在mouseleave停止时播放视频。

但是,当我添加多个视频时,只需播放第一个视频。我试图找出丢失的东西,而我找不到找到它的方法。

Here is the link to codepen: https://codepen.io/felixgonzalo/pen/poJoXRW

我的代码是:

<div class="main-wrapper">

        <div class="video-container">
            <video id="video" class="video" controls class="border" controls="false" muted loop>
                <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
            </video>
            <div class="overlay"></div>
        </div>

        <div class="video-container">
            <video id="video-2" class="video" controls class="border" controls="false" muted loop>
                <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
            </video>
            <div class="overlay"></div>
        </div>

    </div>

jQuery的

$('.video').prop('currentTime', 0)

        function Play() {
            $('.video').get(0).play();
        }
        function Stop() {
            $('.video').prop('currentTime', 0).get(0).pause();
        }

        $(document).ready(function(){
            $('.video-container').mouseenter(function(){
                $('.overlay', this).addClass("hide")
                Play();
            }).mouseleave(function(){
            $('.overlay', this).removeClass("hide")
            Stop();
        });
        });

我也尝试用JS制作,但没有成功:


        var container = document.querySelector('.video-container');

        container.addEventListener('mouseleave', function() {
        this.querySelector('.overlay').classList.remove('hide');
        Stop();
        });

        container.addEventListener('mouseenter', function() {
        this.querySelector('.overlay').classList.add('hide');
        Play()
        });

非常感谢任何帮助

评论