Tengo algunos div con la clase ".web-item" que contienen imágenes. Los reviso con un bucle for y coloco un addEventListener (pasar el mouse) en todas las iteraciones e intento cambiar el estilo de cada elemento (siempre el estilo del elemento sobre el que se desplaza). Pero cuando paso el cursor sobre un elemento, el estilo de todos los elementos cambia siguiendo el elemento sobre el que se pasa el cursor.
Este es mi código JavaScript:
let webItems = document.querySelectorAll(".web-item"); let i = 0; for (let i = 0; i < webItems.length; i++) { webItems[i].addEventListener("mouseover", function() { webItems[i].style.filter = "brightness(30%)"; webItems[i].children[1].style.display = "block"; }); };Y el HTML:
<div class="web-item web-item-a"> <a href="#" target="_blank"> <img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg"> </a> <div class="web-item-caption"> <?php echo $lang["web-caption-a"] ?> </div> </div> <div class="web-item web-item-b"> <a href="#" target="_blank"> <img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg"> </a> <div class="web-item-caption"> <?php echo $lang["web-caption-b"] ?> </div> </div>¿Cómo podría lograr que solo cambie el estilo del elemento realmente flotante? Estaría muy agradecido por su ayuda.
Solo cambiará el estilo del elemento sobre el que se desplaza, pero si pasa el cursor sobre otro elemento después (como si estuviera moviendo el mouse rápidamente), el estilo de ese elemento también cambiará. No tiene ninguna funcionalidad de "dejar de pasar el mouse" en este momento: si el mouse pasa sobre algo, el estilo de ese elemento permanecerá cambiado hasta que se vuelva a cargar la página.
let webItems = document.querySelectorAll(".web-item"); let i = 0; for (let i = 0; i < webItems.length; i++) { webItems[i].addEventListener("mouseover", function() { webItems[i].style.filter = "brightness(30%)"; webItems[i].children[1].style.display = "block"; }); }; <div class="web-item web-item-a"> <a href="#" target="_blank"> <img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg"> </a> <div class="web-item-caption"> <?php echo $lang["web-caption-a"] ?> </div> </div> <div class="web-item web-item-b"> <a href="#" target="_blank"> <img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg"> </a> <div class="web-item-caption"> <?php echo $lang["web-caption-b"] ?> </div> Si bien podría agregar un detector de mouseout, esto se puede lograr solo con CSS y :hover :
.web-item-caption { display: none; } .web-item:hover { filter: brightness(30%) } .web-item:hover > .web-item-caption { display: block; } <div class="web-item web-item-a"> <a href="#" target="_blank"> <img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg"> </a> <div class="web-item-caption"> text 1 </div> </div> <div class="web-item web-item-b"> <a href="#" target="_blank"> <img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg"> </a> <div class="web-item-caption"> text 2 </div>