BFWebAdmin BFWebAdmin - 2 months ago 7
Javascript Question

Stop a hover's 'out' event from triggering when hovering over another item overlaid over the first

I have a

video
element. I want some control buttons to appear when the user hovers over the video that allows them to pause/play and mute/unmute it. Here's my html, CSS and 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;
}


The buttons appear and disappear as desired when I hover in and out of the video, but when I hover over the buttons, I'm technically hovering off the video, because I'm hovering on the buttons instead (though I'm still in the video's area on the screen). Therefore, the buttons disappear when I hover over them.

Is there any way of preventing this? I want the buttons to appear whenever I'm in the video's area, regardless of whether my cursor is actually on that element.

Answer

If you wrap the video and the buttons within the same container div and use your hover events on the container, it will solve your problem much more easily.

Something like:

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

Then add the hover event handlers to video-container.