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")

这是working sample

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

jQuery悬停触发应用程序启动鼠标外部浏览器

1 个答案: