【发布时间】：2020-08-01 13:03:43
【问题描述】：
我已经尝试了所有方法，但没有任何效果
<script src="https://kit.fontawesome.com/7d7eba3ce8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
#var {
opacity:0;
width:100%;
margin-top:-45px;
position:absolute;
background-color:rgba(0, 0, 0, 0.6);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#bgvar {
opacity:0;
height:5px;
width:0%;
background-color:rgba(0, 0, 0, 0.9);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#time {
height:5px;
width:100%;
background-color:blue;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#play-pause {
opacity:0;
color:white;
padding:10px;
font-size:20px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fa-play {
cursor:pointer;
display:none;
opacity:0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fa-pause {
opacity:0;
cursor:pointer;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#expand {
opacity:0;
cursor:pointer;
margin-top:-20px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#compress {
display:none;
cursor:pointer;
margin-top:-20px;
opacity:0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vid:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#var:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#bgvar:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#time:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#play-pause:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
.fa-play:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
.fa-pause:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#expand:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
#compress:hover ~ #var, #bgvar, #time, #play-pause, .fa-pause, #expand, #compress, .fa-play {
opacity:1;
}
</style>
<body id="body">
<video class='vid v' style='width:100%; height:100%; background-color:black; bottom:0;' controlsList=”nodownload” id='vid' autoplay><source src='video.mp4' class='vide'></video>
<div id='var'>
<div id='bgvar'>
<div id='time'>
</div></div>
<div id='play-pause'>
<i class='fas fa-play' id='play'></i>
<i class='fas fa-pause' id='pause'></i>
<div class='d-flex flex-row-reverse ex-co'>
<a href='#vid' style='color:white;'><i class='fas fa-expand' id='expand'></i></a>
<i class='fas fa-compress' id='compress' onclick='closeFullscreen()'></i>
</div>
</div>
</div>
我找不到方法，以便当我将 var 悬停时它不会消失。当我将视频悬停时会出现，但是当我将按钮悬停时它会消失广告它不应该这样做。我尝试了很多方法：围绕视频创建一个容器，为所有元素创建类，但没有任何效果。
【问题讨论】：
-
您介意用可行的 sn-ps 更新您的代码，以便其他人可以为您测试吗？
-
找到方法后我会做的
标签： javascript jquery html css hover