How to use Javascript onmouseout on a DIV when it has child DIVs

Question

I am developing a website for learning purposes. I have created a menu button at top right as seen in the screenshot below.

The below screenshot shows how the page looks when the menu button is triggered.

You can see there are 3 divisions in the expanded menu panel. I am trying to use javascript onmouseout to hide the menu automatically when move the mouse outside the DIV. But as soon as mouse pointer reaches the middle gray div, the menu hides. Though this gray div is a child of menu panel, the menu hides itself as soon as it reaches this gray div. How to over come this problem?

<div class="menupanel">
          <div class="menulist">
            <img class="menu-logo" src="assets/img/logo-g.svg" alt="">
            <ul>
              <li><a class="menulist-link" href="#">Home</a></li>
              <li><a class="menulist-link" href="#">About Us</a></li>
              <li><a class="menulist-link" href="#">Services</a></li>
            </ul>
          </div>
          <div class="contact">
            <div class="cont-container">
              <h2>Address</h2>
              <p>No. 39, LIG3, Surya City, Bangalore - 560008</p>
              <hr>
              <p><ion-icon class="cont-icons" name="call-outline"></ion-icon><a href="tel:+919663396036">+91 9X9X9X9X9X</a></p>
              <p><ion-icon class="cont-icons" name="mail-outline"></ion-icon><a href="mailto:info@theubiquity.in">info@theubiquity.in</a></p>
              <hr>
            </div>
          </div>
          <div class="menuhover">
            <img class="menu-img" src="assets/img/home.jpg" alt="">
            <img class="menu-img" src="assets/img/about.jpg" alt="">
            <img class="menu-img" src="assets/img/service.jpg" alt="">
          </div>

Answer 1

You need mouseleave instead of mouseout:

mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

Demo:

const parent = document.querySelector('#div-soup')

parent.addEventListener('mouseout', () =>
  console.log('mouseout'))

parent.addEventListener('mouseleave', () =>
  console.log(' mouseleave '))

#div-soup{width:45%}div{margin:5px;padding:5px;background:rgba(0,0,0,.1)}.as-console-wrapper{width:50%;max-height:100%;position:fixed;overflow:hidden!important;padding:0;margin:0;right:0;left:50%!important;bottom:0!important;max-height:100%!important}

<div id="div-soup"><div><div><div><div><div><div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></div></div></div></div>

Answer 2

If your element has children, then every event of that children propagates to parent's element event-handler. Long story short, your parent div captures mouseout event of child element and then executes handler. To prevent this you need something like this:

document
  .getElementById('my-parent-div')
  .addEventListener('mouseout', function(event) {
    if (event.target === this) {
      // do some stuff
    }
  });

Answer 3

You can apply the CSS declaration pointer-events: none to <div class="contact">.

Example:

.contact {
  pointer-events: none;
}

This will prevent .menupanel from being able to register a mouseout event, when the mouse-pointer moves over .contact.