javascript - 菜单应该隐藏 onmouseout 但它隐藏 onmouseover

Question

我有一个按钮和一个菜单。鼠标悬停按钮显示菜单。当鼠标离开菜单以隐藏自身时，我已经编写了代码，但它在鼠标经过它之前隐藏了。帮忙？

function showMenu() {
  var menuBar = document.getElementById("menu");

  menuBar.style.display = "block";

}

function hideMenu() {
  document.getElementById("menu").style.display = "none";
}

<a id="menu_button" onmouseover="showMenu()"><img src="https://i.imgur.com/mRIyhW8.png" class="menu_button" onmouseover="this.src='https://i.imgur.com/zSPpoVX.png'" onmouseout="this.src='https://i.imgur.com/mRIyhW8.png'" /></a>

<div id="menu" onmouseout="hideMenu()">
  <ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    <li>ABOUT</li>
  </ul>
</div>

编辑添加 z-index: 2;在我的CSS中解决了这个问题。感谢您的宝贵时间。

Answer 1

您需要使用 mouseleave 因为:

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

更新:

1. 更改了 menu_button 的大小以避免在外部触发图片。
2. 将 css 添加到 #menu，现在开始隐藏。
3. 添加了一个 mouseleave 到 menu_button 以在离开时隐藏图片。

document.getElementById("menu_button").addEventListener('mouseover', function() {
  document.getElementById("menu").style.display = "block";
});

document.getElementById("menu").addEventListener('mouseover', function() {
  document.getElementById("menu").style.display = "block";
});

document.getElementById("menu").addEventListener('mouseleave', function() {
  document.getElementById("menu").style.display = "none";
});

document.getElementById("menu_button").addEventListener('mouseleave', function() {
  document.getElementById("menu").style.display = "none";
});

#menu_button {
  display: block;
  width: 50px;
  height: 50px;
}

#menu_button img:hover {
  opacity: 0.8;
}

#menu {
  border: solid 1px;
  display: none;
 }

<a id="menu_button"><img src="https://i.imgur.com/mRIyhW8.png" class="menu_button" /></a>

<div id="menu">
  <ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    <li>ABOUT</li>
  </ul>
</div>