悬停时我怎样才能让很多元素做同样的事情？

Question

我已经尝试了所有方法，但没有任何效果

<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 上时它不会消失。当我将鼠标悬停时，视频会出现，但当我将鼠标悬停在按钮上时，它会消失，而且它不应该这样做。我尝试了很多方法：在视频周围创建一个容器，为所有元素创建类，但没有任何效果。

Answer 1

我在这里更新了要使用的样式：element + element 选择器代替 element1 ~ element2 选择器，可以轻松捕获 #var div 中的所有元素。然后在 #var div 本身上添加悬停样式以显示按钮有效。

CSS 选择器参考：https://www.w3schools.com/cssref/css_selectors.asp

运行下面的代码片段可以看到它的实际效果。

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

/* refactor styles */
.fa-play,
.fa-pause {
  cursor: pointer;
}

/* refactor styles */
#expand,
#compress {
  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;
}

/* start: main styling changes */
.vid:hover+#var,
#bgvar,
#time,
#play-pause,
.fa-play,
.fa-pause,
#expand,
#compress {
  opacity: 1;
}

#var:hover {
  opacity: 1;
}
/* end: main styling changes */

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

<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>
</body>

Answer 2

我会告诉你一个简单的方法只是得到 Bootstrap studio.I 具有强大的功能。你只需要设计，它就会自己编码。这是它的 link https://bootstrapstudio.io/

满意的话点赞采纳吧

悬停时我怎样才能让很多元素做同样的事情？

How can i do so that many elements when hovering do the same thing?

html

javascript

css

jquery

hover