显示：无； 在CSS中不工作

Question

Hi I'm using this script below.

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

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


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

It creates a box when you hover over a link.

Now the CSS is like this:

#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;
}

It's suppose to hide the panel div, and the script is suppose to show the div on hover.

The only problem is that the div still displays on page load, can anyone help me with this problem.

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;