Question

I am trying to create a popup login screen. It should appear when the user hovers over a hyperlink and dissapear if the mouse moves out of the popup.
The code I have below works but unfortunately the popup incorrectly closes if the mouse moves over another element inside the popup such as the username and password textboxes.
Any ideas how I can fix this flaw?

<script type="text/javascript" language="javascript">

        function showDiv(display) {
            if (display) { document.getElementById('hoverLoginBox').style.display = 'block'; }
            else { document.getElementById('hoverLoginBox').style.display = 'none'; }
        }
</script>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink"
        onmouseover="showDiv(true);">login</asp:HyperLink>
<div id="hoverLoginBox" onmouseout="showDiv(false);">
        <asp:Login ID="Login3" runat="server" CssClass="loginBox" CreateUserText="Create a new  Client Account"
            CreateUserUrl="~/contact-us.aspx" PasswordRecoveryText="Forgotten Your Password?"
            TitleText="" PasswordRecoveryUrl="~/password-recovery.aspx" LoginButtonType="Image"
            FailureText="Invalid Username / Password." DestinationPageUrl="~/membership/user-profile.aspx"
            FailureAction="RedirectToLoginPage">
            <LayoutTemplate>
                <asp:TextBox ID="UserName" runat="server" CssClass="textbox">username</asp:TextBox>
                <asp:TextBox ID="Password" runat="server" CssClass="textbox">password</asp:TextBox>                  
                <asp:Button ID="Button1" runat="server" CssClass="hoverLoginButton" Text="Login" />
            </LayoutTemplate>
        </asp:Login>
        <div class="loginLinks">
            <asp:HyperLink ID="CreateUserLink" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink">Create Account</asp:HyperLink>&nbsp;&nbsp;|&nbsp;&nbsp;
            <asp:HyperLink ID="PasswordRecoveryLink" runat="server" NavigateUrl="~/password-recovery.aspx"
                CssClass="hyperlink">Forgotten Your Password?</asp:HyperLink>
   </div>
</div>

Answer 1

I solved the problem without any code using CSS:

ASPX:

   <div id="divSideMenu">
        <ul>
            <li><a class="home" href="home.aspx" onmouseover="return show_contact_details()"></a>
            </li>                
            <li>
                <div id="hoverLoginContainer">
                    <a href="login.aspx" class="lock"></a>
                    <div id="hoverLoginBox">
                        <asp:Login ID="Login3" runat="server" CssClass="loginBox" CreateUserText="Create a new  Client Account"
                            CreateUserUrl="~/contact-us.aspx" PasswordRecoveryText="Forgotten Your Password?"
                            TitleText="" PasswordRecoveryUrl="~/password-recovery.aspx" LoginButtonType="Image"
                            FailureText="Invalid Username / Password." DestinationPageUrl="~/membership/user-profile.aspx"
                            FailureAction="RedirectToLoginPage">
                            <LayoutTemplate>
                                <asp:TextBox ID="UserName" runat="server" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);"
                                    CssClass="textbox">username</asp:TextBox>
                                <asp:TextBox ID="Password" runat="server" onblur="PasswordWaterMark(this, event);"
                                    onfocus="PasswordWaterMark(this,event);" CssClass="textbox">password</asp:TextBox>
                                <asp:Button ID="Button1" runat="server" CssClass="hoverLoginButton" Text="Login" />
                            </LayoutTemplate>
                        </asp:Login>
                        <div class="loginLinks">
                            <asp:HyperLink ID="CreateUserLink" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink">Create Account</asp:HyperLink>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <asp:HyperLink ID="PasswordRecoveryLink" runat="server" NavigateUrl="~/password-recovery.aspx"
                                CssClass="hyperlink">Forgotten Your Password?</asp:HyperLink>
                        </div>
                    </div>
                </div>
            </li>
            <li><a class="phone" href="javascript:$zopim.livechat.window.toggle()"></a></li>
            <li><a class="email" href="#" onclick="return show_contact_form('reseller=1160')"></a></li>
        </ul>
    </div>

CSS:

#hoverLoginBox 
{
    display: none;
    border: 1px solid #D5D1CD;
    padding: 20px 30px 20px 30px;
    width: 300px;
    z-index: 1000px;
    top: 180px;  
    border-radius: 5px;
    position: fixed;
    left: 45px; 
}

#hoverLoginContainer:hover #hoverLoginBox 
{
    display:  block;
}​

#hoverLoginBox .loginBox
{
    width: 100%;
}   

#hoverLoginBox .textbox
{
    width: 100%;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #554f48;
    fonT-weight: normal;
}