0
183
VisualizaçõesOcultar imagen con el botón de reproducción
La imagen del botón de reproducción se oculta cuando hago clic en él, ¿cómo puedo ocultar también la imagen verde?
Eso es todo lo que estoy tratando de hacer en el código.
Oculte la imagen verde después de hacer clic en la imagen de reproducción.
Actualmente, solo se oculta la imagen de reproducción, ¿cómo puedo ocultar la imagen verde después de hacer clic en la imagen de reproducción?
https://jsfiddle.net/075anu3x/
css imagen verde
.video-wrapper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 1px solid #333; pointer-events: none; background: url(https://i.imgur.com/ShS6nAO.png) no-repeat; background-size: contain; background-position: center; } 
javascript
const manageCover = (function makeManageCover() { const events = {}; function show(el) { el.classList.remove("hide"); } function hide(el) { el.classList.add("hide"); } function fadeVideoIn(cover) { hide(cover); const videoWrapper = document.querySelector(".video-wrapper"); videoWrapper.classList.add("slide"); return videoWrapper; } function showVideo(videoWrapper) { const thewrap = videoWrapper.parentElement.querySelector(".wrap"); show(thewrap); } function coverClickHandler(evt) { const cover = evt.currentTarget; const videoWrapper = fadeVideoIn(cover); showVideo(videoWrapper); cover.dispatchEvent(events.afterClickCover); } function init(callback) { const cover = document.querySelector(".play"); cover.addEventListener("click", coverClickHandler); events.afterClickCover = new Event("afterClickCover"); cover.addEventListener("afterClickCover", callback); } return { init }; }());2 Respostas
Responde à pergunta0
tal vez puedas intentar agregar background: unset; a .video-wrapper.slide::después de clase
0
para su problema, es más fácil hacer que el fondo verde con el botón sea el mismo componente.
La razón por la que el fondo verde no desaparece: está configurado como una pseudoclase en video-wrapper En mi experiencia, javascript no puede alcanzar una pseudoclase, incluso si es posible, hará que su código súper desordenado y difícil de leer y seguir.
Sugerencia: elimine el fondo verde de la clase contenedora de video y muévalo al botón. Mira aquí
HTML
<div class="container"> <div class="video-wrapper"> <div class="ratio-keeper"> <div class="wrap hide"> <div class="video video-frame"></div> </div> </div> </div> <div class="play"> <button type="button" aria-label="Open"></button> </div> </div>CSS
.play { position: relative; width: 100vw; height: 100vh; } .play button { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; border-radius: 50%; cursor: pointer; border: 9px solid; background: transparent; filter: drop-shadow(3px 3px 3px #000000b3); animation: rotate 700ms linear forwards; border-color: red transparent red transparent; } .play::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 1px solid #333; pointer-events: none; background: url(https://i.imgur.com/ShS6nAO.png) no-repeat; background-size: contain; background-position: center; } @keyframes rotate { 0% { transform: rotate(0deg); } 99.9% { border-color: red transparent red transparent; pointer-events: none; } 100% { transform: rotate(360deg); border-color: blue; } } .play button:hover { box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5); } .play button:focus { outline: 0; box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5); } .play button::before { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 27px solid; transform: translateX(4px); animation: triangle 700ms linear forwards; } @keyframes triangle { 0% { opacity: 0; } 99.9% { opacity: 0; } 100% { border-left-color: blue; opacity: 1; } } .hide { display: none; }