Javascript 停止悬停'；s'；输出'；将鼠标悬停在覆盖在第一个项目上的另一个项目上时触发的事件

我有一个

视频

元素。我想在用户将鼠标悬停在视频上时显示一些控制按钮，允许他们暂停/播放和静音/取消静音。以下是我的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>

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

当我将鼠标悬停在视频中时，按钮会根据需要显示和消失，但当我将鼠标悬停在按钮上时，我实际上是在视频中的鼠标悬停，因为我将鼠标悬停在按钮上（尽管我仍然在屏幕上的视频区域中）。因此，当我将鼠标悬停在按钮上时，按钮消失了

---

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

将按钮作为子按钮从

视频中放入，或者创建一个容器，将视频和按钮都放入其中，然后将悬停事件放在容器上

之所以会出现这种情况，是因为按钮
z-index
比
video
标记的
z-index
大。
如果将视频和按钮包装在同一容器
div
中，并在容器上使用悬停事件，将更容易解决问题

比如：

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



然后将悬停事件处理程序添加到视频容器。
将整个视频包装到一个容器中后，可以使用子选择器

其工作原理如下：

如果视频直接位于容器内：

#container:hover > #video { css }

#container:hover + #video { css }

#container:hover #video { css }

如果视频位于容器旁边（容器关闭标签之后）：

#container:hover > #video { css }

#container:hover + #video { css }

#container:hover #video { css }

如果视频位于容器内的某个位置：

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


如果您只需要暂停/播放、静音/音量、全屏；您可以启用浏览器的默认HTML5播放器控件。@当然可以，但它们有点难看。我试图让一些东西更符合网站的布局（顺便说一句，我知道当前的CSS很不漂亮-这只是我为这个问题解决后美化它之前的测试布局）。如果你将视频和按钮包装在同一个容器div中，并在容器上使用悬停事件，它会更容易地解决你的问题。@klikas-啊，当然！如果您想将其添加为答案，我将接受。@BFWebAdmin谢谢，完成：）如果按钮的z索引不大于视频的z索引，它们将不会显示。正确地说，我没有告诉您降低z索引。答案在答案的第一段。由于z索引更大，当您将其悬停时，您不会将视频标记悬停。通过CSS执行此操作（直接）不允许代码中的jQuery动画。