0

ページの左上隅に、カーソルを合わせるとメニューが表示される要素があります。ブラウザから完全にマウスを離してページにアクセスすると、メニューが表示されます。ブラウザに入るとすぐに消えます。

私の仮定では、ブラウザ内で開始しない場合、マウスの位置はデフォルトで (0, 0) になり、この位置が要素の上にあるため、ホバーがトリガーされます。要素を 1 ピクセル右または 1 ピクセル下に移動してこれを確認したところ、最初のホバーなしで両方とも期待どおりに動作しました。

これを説明する「正しい」方法はありますか？

更新: 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 に答える