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

Posted

技术标签:

【中文标题】悬停时我怎么能做很多元素做同样的事情？【英文标题】：How can i do so that many elements when hovering do the same thing? 【发布时间】：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 更新您的代码，以便其他人可以为您测试吗？ 找到方法后我会做的 【参考方案1】：

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

CSS 选择器参考：https://www.w3schools.com/cs-s-ref/css_selectors.asp

运行下面的代码 sn-p 来查看它的实际效果。

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

【讨论】：

【参考方案2】：

我会告诉你一个简单的方法，只需获得 Bootstrap studio。我有很棒的功能。你只需要设计，它就会自己编码。 这是它的链接 https://bootstrapstudio.io/

如果您满意，请喜欢并接受它。

【讨论】：

以上是关于悬停时我怎么能做很多元素做同样的事情？的主要内容，如果未能解决你的问题，请参考以下文章

JQuery - 图像的悬停事件在另一个图像后面

如何确定实际悬停的元素

当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？

单击“a”元素时，触发它的悬停处理程序，而不是转到链接

当鼠标离开元素时如何设置悬停过渡[重复]

我试图通过JS触发DOM元素的悬停，但失败了。看来这是不可能的。但为什么Chrome可以做到呢？怎么样？