I wanna increase the height of the navbar with mouseover it, It is working fine when I hover over the nav element, but goes nuts when I actually hover over the text element of h1, I'm a beginner and images attached
<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");
});
Just a side note, instead of using javascript to do that, try creating a CSS class on hover, like this:
#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>