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

2
votes

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

Home Page with Menu Button

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

Home Page When 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:[email protected]">[email protected]</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>
3
javascriptonmouseout
you can use id or class identifier to select particular div – aviboy2006
You say you have a problem with javascript mouseout, but you haven't shown us the js code, so we can't help you fix a problem in code we can't see! Please review How to Ask to see how to ask a good question and see how to create a minimal,reproducible example that includes all the relevant code we need to be able to see the problem. – FluffyKitten
Try and use mouseleave, not mouseout – epascarello

3 Answers

1
votes

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>
0
votes

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
    }
  });
0
votes

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.