CODEWITHSUNDEEP
javascriptcss
user1970793
user1970793

Reputation: 33

Display:none; not working in css

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.

Upvotes: 0

Views: 826

Answers (2)

TheLazyChap
TheLazyChap

Reputation: 1902

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?

Upvotes: 10

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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;

Upvotes: 5

Related Questions