我试图在 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;
}
For .video_hover:hover .live_video要生效，有一些基本要求 - 主要的是具有该类的元素video_hover（和孩子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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
