CODEWITHSUNDEEP
javascriptdropdownevent-listener
Jarred Cianciulli
Jarred Cianciulli

Reputation: 1

Eventlistener - mouseleave - dropdown menu

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>

Upvotes: 0

Views: 663

Answers (2)

muasif80
muasif80

Reputation: 6006

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>

Upvotes: 1

Girish Sadanandan
Girish Sadanandan

Reputation: 174

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:

  • Some code that does event.stopPropogation() from child node.
  • your HTML code have Structural issues

Upvotes: 0

Related Questions