0

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

我的假设是，如果您不在浏览器内启动，鼠标位置默认为 (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>►&lt;/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。

4

1 回答 1

0

我认为您遇到的问题不是您的悬停代码被触发，而是您最初并没有将菜单隐藏在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();
        }
);
于 2011-05-17T19:10:29.063 回答