How to hide video on div hover?

Question

I am trying to hide video on div hover, however I can't seem to make it work

Currently 'live_video' class is sitting on top with 'eat_video' underneath. I want to hide display of 'live_video' when 'video_hover' class is hovered

What I am trying to achieve is 2 full screen videos stacked but when you hover on the right 50% of the browser window it hides the top video and shows the one beneath

Why is .right_hover:hover .live_video {display: none;} not working?

 <div class="live_video">
 <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="NM_Web_Live_Vid_v1_1_1.mp4" type="video/mp4" >
 </video>
 </div>     

  <div class="eat_video">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="NM_Web_Live_EatPlay_v1_1_1.mp4" type="video/mp4" >
 </video>
 </div> 

CSS

.video_hover {
  width: 50%;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
  cursor: pointer;
}

.eat_video {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: -1;
}

.video_hover:hover .live_video {
  display: none;
}

Answer 1

This is another answer using jQuery. You can use mousemove event to get the mouse position and handle the videos depending on the position of the mouse point.

$('.video_wrapper').on("mousemove", function (event) {
  if(event.pageY <= $('.video_wrapper').height()){
    if(event.pageX <= $('.video_wrapper').width()/2){
      $('.video_clip').removeClass('isHover');
      $('.live_video').addClass('isHover');
    } else {
      $('.video_clip').removeClass('isHover');
      $('.eat_video').addClass('isHover');
    }
  }
});

$('.video_wrapper').on("mouseleave", function (event) {
  $('.video_clip').removeClass('isHover');
  $('.first_video').addClass('isHover');
});

.video_wrapper {
  overflow: hidden;
  position: relative;
}

.video_wrapper video {
  height: auto;
  width: 100vw;
}

.video_wrapper .video_clip:not(.live_video) {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.video_wrapper .video_clip {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.video_wrapper .video_clip {
  opacity: 0;
}
.video_wrapper .isHover.video_clip {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
  <div class="video_clip live_video isHover">
   <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
   </video>
 </div>     

  <div class="video_clip eat_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
   </video>
 </div> 
</div>

Answer 2

$('.video_wrapper .video_hover').hover(function(){
	$('.video_wrapper').addClass('isHover');
}, function(){
	$('.video_wrapper').removeClass('isHover');
}
);

.video_wrapper{
  overflow: hidden;
  position: relative;
}

.video_wrapper video{
  height: auto;
  width: 100vw;
}

.video_wrapper .eat_video{
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.video_wrapper .video_hover{
  bottom: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 1;
}

.video_wrapper .live_video,
.video_wrapper .eat_video{
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;    
}

.video_wrapper.isHover .live_video{
  opacity: 0;
}

.video_wrapper.isHover .eat_video{
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
  <div class="live_video">
     <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>     
  <div class="eat_video">
     <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
     </video>
  </div> 
  <div class="video_hover"></div>
</div>

Answer 3

For .video_hover:hover .live_video to take effect, there are a few basic requirements - the main one being that an element with the class video_hover (and child live_video) is present in the document.

To achieve what you'd like to do, you could appy the following changes to your CSS/HTML:

/* Style video containers to occupy full client area of browser */
.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.video_hover video {
  display:block;
  width: 100%;
  height: 100%;
}

/* Define (hidden) pseudo element that will catch hover interactions
to control the visiblity of respective video elements */ 
.video_hover::before {
  content:"";
  display:block;
  width:50%;
  height:100%; 
  position: absolute;
  top: 0;
  z-index:100;
}   
/* Specify placement of each pseudo element to occupy each side of the
client area */ 
.live_video::before {
  right: 0;
}
.eat_video::before {
  left: 0;
}

/* Eat video hidden when hovering not over right half of screen */
.eat_video video {
  visibility:hidden;
} 

/* When live video (or it's pseudo element) is hovered, "hide" the 
video */
.live_video:hover video {
  visibility:hidden;
}
/* When live video (or it's pseudo element) is hovered, "show" the 
next eact_video video */
.live_video:hover + .eat_video video {
  visibility:visible;    
} 

<!-- Add video_hover to class list -->
<div class="live_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
 </video>
</div>
<!-- Add video_hover to class list -->
<div class="eat_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.fbdemo.com/video/video/demo.mp4" type="video/mp4" >
 </video>
</div>