菜單本應隱藏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>