javascript - 表示:なし; css で動作しない

Question

こんにちは、以下のスクリプトを使用しています。

<script>
$(document).ready(function() {

    $(".btn-slide").hover(function() {
        $("#panel").slideDown(500);
    });


    $("#loginstuff").mouseleave(function() {
        $("#panel").slideUp(500);
    });
});
</script>

リンクの上にカーソルを置くと、ボックスが作成されます。

これで、CSS は次のようになります。

#panel {
    display:none;
    margin:80px 0 0 0;
    width:180px;
    background:#000;
    border-radius:5px;
    padding:7px;
    color:#fff;
    font-family:arial;
    font-size:11px;
    display:block;
    word-spacing: 0px;
    z-index:9999;
}

パネル div を非表示にすることを想定しており、スクリプトはホバー時に div を表示することを想定しています。

唯一の問題は、ページの読み込み時に div がまだ表示されることです。だれでもこの問題を解決できますか。

Answer 1

あなたはdisplay: none最初の行にいて、display: blockさらにブロックを下っています。
2番目のものを削除しようとしましたか？

Answer 2

追加display:none;し、css の一番下にあるdisplay:block;ので上書きされます。#panel の CSS から次の行を削除します。

display:block;