Estoy tratando de agregar una clase a un div al pasar el mouse, pero necesito que permanezca activo hasta que el mouse ingrese a un hermano.
<div class="container"> <p>Hover me 1</p> <div class="hidden">Somthing 1</div> </div> <div class="container"> <p>Hover me 2</p> <div class="hidden">Somthing 2</div> </div> <div class="container"> <p>Hover me 3</p> <div class="hidden">Somthing 3</div> </div>De manera predeterminada, el div tendrá la clase "oculta" y cuando el usuario pase el mouse sobre ese div, debería mostrarse y permanecer visible hasta que el usuario pase el mouse sobre otro div con la misma clase.
.hidden { visibility: hidden; opacity: 0; transition: visibility 0s 9999s, opacity 0.1s linear; } .show { visibility: visible; opacity: 1; transition-delay: 0s; }Esto es lo que estoy tratando de hacer
document.ready(function() { document.getElementByClassName("hidden").mouseenter(function() { document.getElementByClassName("show").classList.remove("show").classList.add("hidden"); this.classList.remove("hidden").classList.add("show"); }); });Creo que esto es más fácil de hacer con jQuery pero necesito usar JS puro
Puede agregar un detector de eventos mouseenter a todos los elementos con la clase de container que agrega la clase hidden al div en cada uno y agrega la clase show al div en el actual.
const containers = document.querySelectorAll('.container'); containers.forEach(f => f.addEventListener('mouseenter', function() { containers.forEach(e => { var div = e.querySelector('div'); div.classList.add('hidden'); div.classList.remove('show'); }) this.querySelector('div').classList.add('show') })) .hidden { visibility: hidden; opacity: 0; transition: visibility 0s 9999s, opacity 0.1s linear; } .show { visibility: visible; opacity: 1; transition-delay: 0s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p>Hover me 1</p> <div class="hidden">Somthing 1</div> </div> <div class="container"> <p>Hover me 2</p> <div class="hidden">Somthing 2</div> </div> <div class="container"> <p>Hover me 3</p> <div class="hidden">Somthing 3</div> </div>Solución CSS pura
Lo que necesita es una pseudoclase CSS :hover y un selector de hermanos adyacentes
.hidden { visibility: hidden; opacity: 0; transition: visibility 0s 9999s, opacity 0.1s linear; } .container p:hover + div.hidden { visibility: visible; opacity: 1; transition-delay: 0s; } <div class="container"> <p>Hover me 1</p> <div class="hidden">Somthing 1</div> </div> <div class="container"> <p>Hover me 2</p> <div class="hidden">Somthing 2</div> </div> <div class="container"> <p>Hover me 3</p> <div class="hidden">Somthing 3</div> </div>Me gusta hacer este tipo de cosas con un oyente. Aquí verificamos si el mouse está sobre un .container p , almacenamos el último div hidden en una variable. Si hay algo en el element , volvemos a agregar la clase hidden , luego eliminamos la clase hidden del hermano actual y la almacenamos en la variable del element .
let element; document.addEventListener('mouseover', e => { if (e.target.matches('.container p')) { if (element != null) { element.classList.add('hidden'); } element = e.target.nextElementSibling; element.classList.remove('hidden'); } }); .hidden { visibility: hidden; opacity: 0; transition: visibility 0s 9999s, opacity 0.1s linear; } .show { visibility: visible; opacity: 1; transition-delay: 0s; } .container p { cursor: pointer; } <div class="container"> <p>Hover me 1</p> <div class="hidden">Somthing 1</div> </div> <div class="container"> <p>Hover me 2</p> <div class="hidden">Somthing 2</div> </div> <div class="container"> <p>Hover me 3</p> <div class="hidden">Somthing 3</div> </div> También agregué una regla cursor: pointer css en las etiquetas p .