javascript - 当 DIV 具有子 DIV 时，如何在 DIV 上使用 Javascript onmouseout

Question

我正在开发一个用于学习目的的网站。我在右上角创建了一个菜单按钮，如下面的屏幕截图所示。

下面的屏幕截图显示了触发菜单按钮时页面的外观。

您可以看到展开的菜单面板中有 3 个分区。我正在尝试使用 javascript onmouseout 在将鼠标移到 DIV 之外时自动隐藏菜单。但是，一旦鼠标指针到达中间的灰色 div，菜单就会隐藏。虽然这个灰色 div 是菜单面板的子级，但菜单一旦到达这个灰色 div 就会隐藏自己。如何解决这个问题？

<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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046d6a626b44706c6171666d75716d707d2a6d6a" rel="noreferrer noopener nofollow">[email protected]</a>"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85ecebe3eac5f1ede0f0e7ecf4f0ecf1fcabeceb" rel="noreferrer noopener nofollow">[email protected]</a></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

您需要mouseleave而不是鼠标悬停:

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).

演示:

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>