onmouseoutを非表示にするメニューですが、onmouseoverを隠すメニュー

Question

ボタンとメニューがあります。マウスオーバーのボタンはメニューを表示します。私は、マウスがメニューを離れて自分自身を隠すときにコーディングしましたが、マウスが上に行く前に隠れています。助けて？ z屈折率追加

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 ：2。私のCSSで問題を解決しました。あなたの時間をありがとう。

Answer 1

マウスがUL要素の上にあるときにonmouseoutイベントがトリガされます。純粋なjavascriptでこの問題を解決するのは複雑です。 Jqueryには、マウスとマウスのメソッドがあります。あなたはmouseleaveので、使用する必要が

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

Answer 2

：マウスポインタがどの子 要素だけでなく、選択した要素から離れたときに

マウスアウトイベントがトリガされます。

更新：

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>