onMouseOutイベントが自分のHTMLで機能していません

Question

私のページにこのコードがあります。

<div class="MenuItemContainer"> 
       <a href="javascript:ShowHelpMenu()"> 
        <div class="MenuItemContent"> 
         <div> 
          <img src="/Content/TopMenu/Icons/Help.png" alt="Help" /> 
         </div> 
         <div> 
          Help 
         </div> 
         <div id="divHelpMenu" class="HelpMenuDisplayDiv" style="z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" onmouseout="HideHelpMenu()"> 
         <%=Session["helpUrls"]%> 
         <%-- <%=Session["Links"]%> 
         --%> 
         </div> 
       </div> 

は、これは私の機能

function ShowHelpMenu() { 
$("#divHelpMenu").css("display","block"); 
} 
function HideHelpMenu() { 
$("#divHelpMenu").css("display","none"); 
} 

私はすべてのリンクを表示することができますが、私は私のdivタグが閉じているリンクをマウスオーバー時にヘルプリンクをクリックしてください

です。 divタグからマウスを外したときにonmouseoutイベントが発生しません。

終了時にHTMLリンクにマウスを重ねると、

間違った要素上にマウスアウトコードを持っているように見えますおかげ

Answer 1

私はそれが働いてしまった、

$(document).ready(function() { 
    $('#divHelpMenu').hover(function() { 
     $("#divHelpMenu").css("display", "block"); 
    }, function() { 
     $("#divHelpMenu").css("display", "none"); 
    }); 
}); 

Answer 2

、私はあなたがMenuItemContainer divの上でそれをしたいと思います。また、コードをあなたのインラインマウスを削除し、ヘルプのdivを表示したときに正しいコンテナにイベントをバインドし、このようなことができます：

function ShowHelpMenu() { 
    $("#divHelpMenu").css("display","block"); 
    $('#MenuItemContainer').bind('mouseout.helpmenu', HideHelpMenu); 
} 
function HideHelpMenu() { 
    $("#divHelpMenu").css("display","none"); 
    $('#MenuItemContainer').unbind('mouseout.helpmenu'); 
} 

Answer 3

あなたは、いくつかの閉鎖を行方不明にタグ。次のHTMLマークアップを試してください：

<div class="MenuItemContainer"> 
    <a href="#" onclick="javascript:ShowHelpMenu();return false;"> 
    <div class="MenuItemContent"> 
     <div><img src="/Content/TopMenu/Icons/Help.png" alt="Help" /></div> 
     <div>Help</div> 
    </div> 
    </a><br/> 
    <div id="divHelpMenu" class="HelpMenuDisplayDiv" 
    style="display:none;z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" 
    onmouseout="HideHelpMenu()"> 
     Link1<br/> 
     Link2<br/> 
     Link3<br/> 
     Link4<br/> 
     Link5<br/> 
     Link6<br/> 
    </div> 
</div>