Quiero aumentar la altura de la barra de navegación con el mouse sobre ella, funciona bien cuando paso el mouse sobre el elemento de navegación, pero se vuelve loco cuando realmente paso el mouse sobre el elemento de texto de h1, soy un principiante y las imágenes adjuntas
<nav> <h1>My Page</h1> </nav> const nav = document.querySelector("nav"); nav.addEventListener("mouseover", (event) => { event.target.classList.add("height100"); }); nav.addEventListener("mouseout", (event) => { event.target.classList.remove("height100"); });Solo una nota al margen, en lugar de usar javascript para hacer eso, intente crear una clase CSS al pasar el mouse, como esta:
#my-navbar { /*your navbar styles*/ } #my-navbar:hover { /*your navbar styles when hovering over it*/ } <nav id="my-navbar"> <h1 id="my-navbar-title">My Page</h1> </nav>