javascript - 鼠标悬停时登录弹出窗口

Question

我正在尝试创建一个弹出式登录屏幕。它应该在用户将鼠标悬停在超链接上时出现，并在鼠标移出弹出窗口时消失。
我下面的代码有效，但不幸的是，如果鼠标移到弹出窗口内的另一个元素(例如用户名和密码文本框)上，弹出窗口会错误地关闭。有什么办法可以解决这个缺陷吗？

<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

使用一点jQuery

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input[id$=Button1]').mouseover(function () {
            $('table[id$=hoverLoginBox]').show();
        });
        $('input[id$=Button1]').mouseout(function () {
            $('table[id$=hoverLoginBox]').hide();
        });
    });
</script>