Остановить событие '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> 

Затем добавить обработчики событий для парения видео-контейнера.

Answer 2

Поместите кнопки в качестве дочерних элементов из video или создайте контейнер и вставьте в него как видео, так и кнопки, а затем положите событие наведения на контейнер.

Это происходит потому, что кнопка z-index больше, чем z-index из video тегов.

Answer 3

Вы можете использовать дочерние селекторы после упаковки всего вашего видео в один контейнер.

Как это работает:

Если видео непосредственно внутри контейнера:

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