菜单本应隐藏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

当鼠标悬停在UL元素上时，会触发onmouseout事件。 使用纯JavaScript解决此问题很复杂。 jQuery具有mouseenter和mouseleave方法。

    $("#menu_button").mouseenter(function () {
        $("#menu").show();
    });
    $("#menu").mouseleave(function () {
        $(this).hide();
    });

Answer 2

您需要使用mouseleave因为：

当鼠标指针离开任何子元素以及所选元素时，将触发mouseout事件。

更新：

1. 更改了menu_button的大小，以避免在图像外部触发。
2. 在#menu中添加了CSS，现在开始隐藏。
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>