Tratando de descubrir cómo usar el evento mouseleave cuando el mouse deja todos los elementos en un menú desplegable. Actualmente solo funciona cuando el mouse sale del submenú, pero no el elemento Acerca de ni los elementos del submenú. Volviéndome loco y he estado tratando de resolverlo durante HORAS.
<ul class="navigation__list-menu"> <li class="navigation__list-menu-about"> <a href="/about" class="now">About</a> </li> <ul id="nav" class="navigation__list-menu-about-options now"> <li><a href="/bio">my bio</a></li> <li><a href="/cv">curriculum vitae</a></li> </ul> <script> const navOptions = document.querySelector(".navigation__list-menu-about"); const navOptionMenu = document.querySelector( ".navigation__list-menu-about-options" ); navOptions.addEventListener("mouseenter", (e) => { navOptionMenu.classList.add("active"); }); navOptions.addEventListener("mouseleave", (e) => { navOptionMenu.classList.remove("active"); }); </script>En realidad, solo está manipulando los elementos secundarios. También debe agregar/eliminar la clase al elemento acerca de. Por favor, eche un vistazo al fragmento de código a continuación
const navOptions = document.querySelector(".navigation__list-menu-about"); const navOptionMenu = document.querySelector( ".navigation__list-menu-about-options" ); navOptions.addEventListener("mouseenter", (e) => { navOptions.classList.add("active"); }); navOptions.addEventListener("mouseleave", (e) => { navOptions.classList.remove("active"); }); navOptionMenu.addEventListener("mouseenter", (e) => { navOptionMenu.classList.add("active"); }); navOptionMenu.addEventListener("mouseleave", (e) => { navOptionMenu.classList.remove("active"); }); <style> .active, .active a { color: red; } </style> <ul class="navigation__list-menu"> <li class="navigation__list-menu-about"> <a href="/about" class="now">About</a> </li> <ul id="nav" class="navigation__list-menu-about-options now"> <li><a href="/bio">my bio</a></li> <li><a href="/cv">curriculum vitae</a></li> </ul> </ul>La difusión de eventos siempre pasará el evento de la etiqueta secundaria a la etiqueta principal, a menos que haya un código JavaScript para cancelarlo.
Lo que significa que al escuchar el navigation__list-menu también puede obtener todos los eventos de su hijo. basado en event.target , puede comprender de dónde proviene el evento.
Si no puede obtener el evento en el padre, entonces podría haber:
event.stopPropogation() desde el nodo secundario.