Lo he intentado de todas maneras pero nada funciona

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

No pude encontrar la manera para que cuando pase el mouse sobre el var no desaparezca. Cuando paso el mouse sobre el video aparece pero cuando paso el mouse sobre los botones desaparece y no se supone que haga eso. He intentado de muchas maneras: crear un contenedor alrededor del video, crear clases para todos los elementos y nada funcionó.

0
rafael 19 abr. 2020 a las 04:43

2 respuestas

Aquí he actualizado los estilos para usar: selector element + element en lugar del selector element1 ~ element2, que permite capturar fácilmente todos los elementos en #var div. Y luego agregar el estilo de desplazamiento en #var div para revelar los botones funciona.

Referencia de selectores de CSS: https://www.w3schools.com/cssref/css_selectors.asp

Ejecute el fragmento de código a continuación para verlo en acción.

#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>
0
Ashish Patel 19 abr. 2020 a las 04:55

Te diré una manera fácil de obtener el estudio Bootstrap. Tengo características magníficas. solo tiene que diseñar y hará la codificación en sí. Aquí está el enlace. https://bootstrapstudio.io/

Si estás satisfecha hazlo y acepta.

0
Shrey 19 abr. 2020 a las 05:40