Estoy tratando de usar js de manera que cuando pasa el mouse sobre los enlaces de texto, la imagen de fondo cambia con cada enlace. Pude iniciar Event Listener en los textos del enlace, pero no puedo dirigir la salida al div de la imagen de fondo (elemento de estilo)
Aquí está mi código html
<div id="livestream"> </div> <div id="wedding"> </div> <div id="documentary"> </div> <div class="container text-box"> <a href="#">Livestreaming</a> <a href="#">Weddings</a> <a href="#">Documentaries</a> </div>Mi css, que también estoy atascado;
.landing #documentary{ background-image: url("/img/pic-01.jpg"); background-size: cover; height: 100vh; z-index: -1; } .landing #livestream, #wedding, #documentary{ display: none; } .text-box a:nth-child(1):hover{ color: #e08416; transition: 0.4s ease;} }Y aquí está mi código js
document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseenter', entering); document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseleave', leaving); function entering(ev){ ev.currentTarget.style.display = "block"; console.log('mouseenter a'); } function leaving(ev){ ev.currentTarget.style.display = "none"; console.log('mouseleave a'); }¡Me quedé atrapado aquí!
Puede usar un querySelector en el método de entering o leaving para capturar el elemento que necesita. O, en este caso, es más sencillo llamar al parentElement del elemento.
function entering(ev){ ev.currentTarget.parentElement.style.display = "block"; console.log('mouseenter a'); } function leaving(ev){ ev.currentTarget.parentElement.style.display = "none"; console.log('mouseleave a'); }