jQuery 悬停触发应用程序从浏览器外部的鼠标开始

Question

我在页面的左上角有一个元素，当您将鼠标悬停在它上面时会显示一个菜单。如果您完全在浏览器之外使用鼠标访问该页面，则会显示菜单。一旦你进入浏览器，它就会消失。

我的假设是，如果您不在浏览器内启动，则鼠标位置默认为 (0, 0)，并且由于该位置位于我的元素上方，因此它会触发悬停。我通过将元素向右移动一个像素或向下移动一个像素来确认这一点，并且两者的行为都符合预期，没有初始悬停。

有没有“正确”的方法来解释这个问题？

更新： 这是 jQuery 代码：

        // Enable the user menu
        $("#user")
            .hover(
                function() {
                    $("span", "#user").css("color", "#195d43");
                    $("div", "#user").show();
                },
                function() {
                    $("span", "#user").css("color", "Silver");
                    $("div", "#user").hide();
                }
        );

和元素：

<div id="user">
    Hello,
    <%=appUser.Name%>
    <span>►</span>
    <div>
        <a href="#">Change Password</a>
        <a href="#">Manage Security Questions</a>
    </div>
</div>

以及元素的 CSS：

#user {
    position: absolute;
    top: 0px;
    padding: 2px;
    font-size: 12px;
    color: #195d43;
    background-color: #f1f1ee;
}

#user:hover {
    background-color: #e1dfd9;
}

#user span {
    color: Silver;
}

#user div {
    display: none;
    background-color: #f1f1ee;
    position: absolute;
    z-index: 999;
    border: solid 5px #e1dfd9;
}

更新 2： 这发生在 Chrome 中。在 IE7 中不会发生这种情况。该应用程序本身是MVC 1.0，VS 2008。

Answer 1

我认为你遇到的问题不是你的悬停代码被触发，而是你最初没有在CSS中隐藏菜单

#user div{display:none;}

另外，你的选择器很奇怪......

这......

$("span", "#user")

应该是

$("span, #user")

这里是一个工作示例

$("#user")
    .hover(
        function() {
            $("span, #user").css("color", "#195d43");
            $("#user div").show();
        },
        function() {
            $("span, #user").css("color", "#999");
            $("#user div").hide();
        }
);