如何在div悬停时隐藏视频? [英] How to hide video on div hover?
问题描述
我正在尝试在div悬停时隐藏视频,但是我似乎无法使其正常工作
I am trying to hide video on div hover, however I can't seem to make it work
当前,"live_video"类位于顶部,"eat_video"位于下方.我想在"video_hover"类悬停时隐藏"live_video"的显示
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
我想要实现的是堆叠2个全屏视频,但是当您将鼠标悬停在浏览器窗口右侧50%时,它会隐藏顶部视频并在下方显示
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
为什么.right_hover:hover .live_video {display:none;}不起作用?
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;
}
推荐答案
为使 .video_hover:hover .live_video
生效,有一些基本要求-主要要求是文档中存在类 video_hover
(和子类 live_video
).
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.
要实现您想做的事情,可以对CSS/HTML进行以下更改:
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>
这篇关于如何在div悬停时隐藏视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!