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

看起来你的鼠标退出代码在错误的元素上，我认为你会希望它在MenuItemContainerdiv上。你也可以删除你的内联鼠标退出代码，并在显示帮助div时将事件绑定到正确的容器，像这样:

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

Answer 2

您缺少一些结束标记。尝试下一个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>

Answer 3

我搞定了，

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