Javascript mouseenter() 无法正常工作

Question

我是 php 和 javascript 的新手，正在编写我的第一个网页程序。我正在尝试添加登录功能。预期的行为是:只要鼠标光标悬停在帐户图标上，它就会显示登录选项。用户登录后，再次将光标移到帐户图标上，它将显示配置文件选项。然而，实际行为是:一旦用户登录，并再次将光标移到帐户图标上，它不会显示配置文件选项，除非将光标准确移动到 account_icon 的顶部/底部边框上。好像只有account_icon的上下边框才能触发鼠标事件。我必须刷新页面 (F5)，然后它才能正常工作。

我添加了“header("Location: index.php");"为了刷新页面，但它仍然不起作用。只有F5可以解决这个问题。我用谷歌搜索了很多相关问题并尝试了很多东西，但我仍然找不到解决这个问题的方法。我想知道是否有人可以帮助我解决这个问题或给我任何建议？我将非常感激。

我的代码如下所示。如果您需要更多信息，请告诉我。

PHP 代码 index.php:

if(isset($_POST['submit_login']) && !empty($_POST['submit_login']))
{
    if($_POST['email_login'] && $_POST['password_login'])
    {
        $query = "SELECT user_id, email, password FROM user_login WHERE email='{$_POST['email_login']}' AND password='{$_POST['password_login']}'";

        if($query_run = mysql_query($query))
        {
            if(mysql_num_rows($query_run) != NULL)
            {
                while($query_row = mysql_fetch_assoc($query_run))
                {
                    $user_id = $query_row['user_id'];
                    $email = $query_row['email'];
                    $password = $query_row['password'];

                    $_SESSION['logged_in'] = true;
                    $_SESSION['user_id'] = $query_row['user_id'];
                    $_SESSION['email'] = $query_row['email'];
                    $_SESSION['password'] = $query_row['password'];

                    header("Location: index.php");
                }
            }
            else
            {
                echo "Can't find";
            }
        }
        else
        {
            echo mysql_error();
        }
    }
    else
    {
        // the username or password is not filled in
        die(mysql_error());
    }
}

    <div id="account">
        <img id="account_icon" src="accountIcon.png" alt="account">
        <div class="account_infobox">
            <ul>
                <?php
                    if(!isset($_SESSION['logged_in'])):

                ?>
                <li class="account_info signin">
                    <a class="account_btn" id="signin_btn" href="javascript:void(0)">Log In</a>
                </li>
                <li class="account_info signup">
                    <a class="account_btn" id="signup_btn" href="javascript:void(0)">Sign Up</a>
                </li>

                <?php
                    else:
                ?>

                <li class="account_info profile">
                    <a class="account_btn" id="profile_btn" href="?profile">Profile</a>
                </li>
                <li class="account_info signoff">
                    <a class="account_btn" id="signoff_btn" href="?logoff">Log Off</a>
                </li>

                <?php
                    endif;
                ?>
            </ul>
        </div>
    </div>

Javascript 代码:

$(document).ready(function(){
    $("#account_icon").mouseenter(function(){
        $(".account_infobox").slideDown(100);
    });

    $("#account").mouseleave(function(){
        $(".account_infobox").slideUp(100);
    });

    $("#signin_btn").click(function(){
        $(".login_dialog").show();
    });

    $("#signup_btn").click(function(){
        $(".signup_dialog").show();
    });
});

CSS 代码

#account {
    position: absolute;
    height: 50px;
    left: calc((100% - 1200px) / 2 + 1200px - 80px);
    width: 60px;
    margin-top: 5px;

    border: 2px solid yellow; /* Only use this border for layout debugging */
}

#account_icon {
    position: absolute;
    left: 10px;
    width: 40px;
    height: 40px;
    z-index: 1100;
    border: 2px solid red; /* Only use this border for layout debugging */
}

.account_infobox {
    display: none;
    position: fixed;
    left: calc((100% - 1200px) / 2 + 1200px - 200px);
    top: 53px;
    width: 200px;
    height: 60px;    
    background: #333333;    
    border: 2px solid blue; /* Only use this border for layout debugging */
}

Answer 1

那一刻你给 header() 停止执行以使其工作:

while($query_row = mysql_fetch_assoc($query_run))
{
    $user_id = $query_row['user_id'];
    $email = $query_row['email'];
    $password = $query_row['password'];

    $_SESSION['logged_in'] = true;
    $_SESSION['user_id'] = $query_row['user_id'];
    $_SESSION['email'] = $query_row['email'];
    $_SESSION['password'] = $query_row['password'];

    header("Location: index.php");
    die();
}

这样，它发送 header ，浏览器刷新页面。