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>

Answer 2

make a hyper link as


    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink" onmouseover="showPop('hoverLoginBox');">login</asp:HyperLink>                              

add this in pop up div
<div id="hoverLoginBox" onmouseout="showDiv('hoverLoginBox');">


and apply javascript as 

    function showPop(obj){
       if(document.getElementById){
       var el = document.getElementById(obj);
          if(el.style.display != "block"){
             el.style.display = "block";
          }else{
             el.style.display = "none";
          }
       }
    }

Answer 3

我使用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;
}

在Mouseover上登录弹出窗口

3 个答案: