Estaba tratando de escribir el código JS para resaltar el elemento cuando el usuario pasa el cursor sobre él. Para lograrlo, estoy tratando de agregar eventListener en cada niño en la primera etiqueta "nav" en el documento actual:
let navigation = document.getElementsByTagName("nav"); elements = navigation[0].children; for (element in elements) { elements[element].addEventListener("mouseenter", function(event) { event.target.style.color = "#ffbf00"; event.target.style.textShadow = "0px 0px 20px #ffbf00"; setTimeout(function() { event.target.style.color = ""; event.target.style.textShadow = "0 0 5px #a50068"; }, 500); }, false); }Pero cuando lo abro en el navegador, no solo no funciona, sino que Chrome dice en DevTools que la variable "navegación" no está definida. ¿Qué estoy haciendo mal?
Esto se puede lograr más fácilmente usando CSS:
nav>*:hover { color: #ffbf00; text-shadow: 0px 0px 20px #ffbf00; }En cuanto a su JS:
type="module" o defer el atributo a sus etiquetas <script> o su DOM no se cargará cuando se ejecute el script y no encontrará su elemento de nav .for (const element of elements) (en lugar de in ).