Как я могу сделать так, чтобы многие элементы при зависании делали одно и то же? - PullRequest
Новая
       20

Как я могу сделать так, чтобы многие элементы при зависании делали одно и то же?

0 голосов
/ 19 апреля 2020

Я перепробовал все способы, но ничего не работает 

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

Я не мог найти способ, чтобы при наведении указателя вар не исчезал. При наведении курсора видео появляется, но при наведении курсора на кнопки оно исчезает и не должно этого делать. Я пробовал много способов: создать контейнер вокруг видео, создать классы для всех элементов, и ничего не получилось.

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Я расскажу вам простой способ просто получить Bootstrap studio. У меня есть великолепные функции. вам просто нужно спроектировать и он сам сделает кодирование. Вот ссылка на него https://bootstrapstudio.io/

Если вы удовлетворены, сделайте это и примите.

0 голосов
/ 19 апреля 2020

Здесь я обновил стили для использования: 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>
...