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

看起来你的鼠标输出错误的元素代码，我想你想在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 2

我得到了它的工作，

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

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>

onMouseOut事件在我的HTML中不起作用

3 个答案: