jQuery mouseleave - mouseenter 只在第一個元素中工作

Question

我正在努力嘗試在幾個視頻中設置mouseenter和mouseleave事件。 一切似乎都很完美，視頻在我mouseenter時播放並在mouseleave時停止。

但是，當我添加多個視頻時，只需播放第一個視頻。 我試圖弄清楚它缺少什么我沒有找到方法。

這是 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()
        });

真的很感謝任何幫助

Answer 1

您的函數 play 僅獲取第一個視頻，因為您指定了0索引。 您需要傳遞當前懸停的視頻索引以觸發播放。 編輯：工作代碼。 我讓你的函數接受了一個參數，我將它設置為觸發鼠標事件的元素的第一個視頻元素子元素。

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

$(document).ready(function() {
    $('.video-container').mouseenter(function() {
        $('.overlay', this).addClass("hide")
        $(this).children('.video')[0].play();
    }).mouseleave(function() {
        $('.overlay', this).removeClass("hide")
        $($(this).children('.video')[0]).prop('currentTime', 0)
        $(this).children('.video')[0].pause();
    });
});