菜單應該隱藏onmouseout，但它隱藏onmouseover

我有一個按鈕和一個菜單。鼠標懸停的按鈕顯示菜單。當鼠標離開菜單隱藏自己時，我編寫了代碼，但在鼠標移過菜單之前隱藏。幫幫我？菜單應該隱藏onmouseout，但它隱藏onmouseover

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>

EDIT 添加的z-index：2;在我的CSS解決了這個問題。感謝您的時間。

來源

2017-10-07 Bill Hicks

你可以改變圖片的鏈接到一個完整的鏈接，以便我們可以測試？ –

@TemaniAfif那裏。 –

當鼠標懸停在UL元素上時觸發onmouseout事件。用純javascript來解決這個問題很複雜。 jquery有mouseenter和mouseleave方法。

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

來源

2017-10-07 21:54:01 selami

我已經試過jquery先生，由於某種原因它根本不工作，是的，我已經包括了圖書館。 –

您需要使用mouseleave因爲：

當鼠標指針離開任何子元素以及所選元素的mouseout事件觸發。

更新：

改變menu_button的大小，以避免外界圖像觸發。
將#ss添加到#menu，現在開始隱藏。
在離開圖片時添加了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>

來源

2017-10-07 22:09:39 MarioZ

有趣的是，當我離開菜單欄時，菜單欄不會消失。我看到它在這裏工作，但不在我的網站上。 –

@BillHicks我更新了一些更改，使其更好地工作。如果那樣做不行，我需要在你的網站上看到其他的代碼。 – MarioZ

@BillHicks我看到我改變了什麼不好，抱歉，我必須修復它。 – MarioZ

菜單應該隱藏onmouseout，但它隱藏onmouseover

回答

相關問題