当悬停在覆盖在第一个项目上的另一个项目上时，停止触发悬停的“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; 
}

当我将鼠标悬停在视频内外时，按钮会根据需要出现和消失，但是当我将鼠标悬停在按钮上时，从技术上讲，我是在视频上悬停，因为我是在按钮上悬停（虽然我' m 仍然在屏幕上的视频区域中）。因此，当我将鼠标悬停在按钮上时，它们就会消失。

有没有办法防止这种情况发生？无论我的光标是否实际上在该元素上，我都希望按钮在我处于视频区域时出现。

Answer 1

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

类似：

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

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

Answer 2

您可以在将整个视频包装到一个容器中后使用子选择器。

这是如何工作的：

如果视频直接在容器内：

#container:hover > #video { css }

如果视频在容器旁边（在容器结束标记之后）：

#container:hover + #video { css }

如果视频在容器内的某处：

#container:hover #video { css }

编辑：包括这将如何反映在您的代码中。

<div id="container">

    <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>

</div>

Answer 3

将按钮作为来自video 的子元素，或者创建一个容器并将视频和按钮都放入其中，然后将悬停事件放在容器上。

发生这种情况是因为按钮z-index 大于video 标记的z-index。