javascript - 当悬停在覆盖第一个的另一个元素上时，停止触发悬停的 'out' 事件

Question

我有一个 video 元素。当用户将鼠标悬停在允许他们暂停/播放和静音/取消静音的视频上时，我希望出现一些控制按钮。这是我的 html、CSS 和 jQuery:

HTML

<video autoplay muted>
    <source src="<?=get_template_directory_uri()?>/video/bfvideo.mp4" type="video/mp4">
    <img src="<?php the_field('hero_image'); ?>" class="hero-text img-res" alt="<?php the_field('hero_image_alt_text'); ?>"/>
</video>
<div class="videoMute videoButton">M</div>
<div class="videoPause videoButton">P</div>

js

heroVideo.hover(        
        function() {
            // In
            console.log('In');
            $('.videoButton').fadeIn(100);
            //heroVideo.prop('muted','');
        },
        function () {
            // Out  
            console.log('Out');
            $('.videoButton').fadeOut(100);
            //heroVideo.prop('muted','true');
        }
    );

CSS

.videoButton {
    background: #ccff00;
    display: inline-block;
    height: 50px;
    width: 50px;
    position: absolute;
    z-index:9999;
    bottom:50px;
    text-align:center;
    cursor:pointer;
    display:none;
}

.videoMute {
    left:50px;  
}

.videpPause {
    left:250px; 
}

当我将鼠标悬停在视频上和悬停在视频外时，按钮会根据需要出现和消失，但是当我将鼠标悬停在按钮上时，从技术上讲，我的鼠标悬停在视频之外，因为我的鼠标悬停在按钮上(尽管我我仍然在屏幕上的视频区域)。因此，当我将鼠标悬停在按钮上时，按钮会消失。

有什么办法可以避免这种情况吗？我希望无论我的光标是否实际上在该元素上，只要我在视频区域中，按钮就会出现。

Answer 1

如果您将视频和按钮包装在同一个容器 div 中并在容器上使用悬停事件，它将更容易地解决您的问题。

类似于:

<div class="video-container">
   <!-- your video here -->
   <!-- your buttons here -->
</div>

然后将悬停事件处理程序添加到视频容器。