Trying to figure out how to use the mouseleave event when the mouse leaves all the elements in a dropdown menu. It currently only works when the mouse leaves the submenu, but not the About element as well as the submenu elements. Driving me crazy and been trying to figure it out for HOURS.
<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>
Actually you are only manipulating the sub items. You need to add/remove the class to the about item too. Please have a look at the code snippet below
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>Event bubbling will always pass the event from child tag to parent tag unless there is a JavaScript code to abort it.
Which means by listening to the parent navigation__list-menu you can get all events from its child's too. based of the event.target you can understand where event came from.
If you can't get the event at parent then there might be:
event.stopPropogation() from child node.