Question

I have this code in my page.

  <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>

This is my Functions

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

When I click on Help Link I can display all the Links but when I mouseover on the links my Div tag is closing. onmouseout event is not firing when I mouse out from the div tag.

its closing when I mouse in on HTML links.

Thanks

Answer 1

I got it working,

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