时间戳

首页 > 解决方案 > 如何在 div 悬停时隐藏视频？

css - 如何在 div 悬停时隐藏视频？

问题描述

我试图在 div 悬停时隐藏视频，但我似乎无法让它工作

目前，“live_video”类位于顶部，“eat_video”位于下方。当“video_hover”类悬停时，我想隐藏“live_video”的显示

我想要实现的是堆叠 2 个全屏视频，但是当您将鼠标悬停在浏览器窗口的右侧 50% 时，它会隐藏顶部视频并显示下方的视频

为什么 .right_hover:hover .live_video {display: none;} 不起作用？

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

标签： css

解决方案

要.video_hover:hover .live_video生效，有一些基本要求 - 主要要求是文档中存在具有 class video_hover（和 child ）的元素。live_video

为了实现您想要做的事情，您可以将以下更改应用到您的 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>

推荐阅读