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

You have display: none on the first line and then you have display: block further down the block.
Have you tried removing the second one?

Answer 2

you are adding display:none; and then at bottom of css display:block; so its getting overridden, remove following line from your css for #panel:

display:block;