How to fade in a div on hover/mouseover using jquery?

Question

I have a div that is set to display:hidden. I want this div to be set to display:block when a certain element (#navbar li a) is hovered over. Here is my javascript.

$('document').ready(function(){
    $("#navbar li a").onmouseover(function{
        $("#navbar ul").css("display","block"); 
    }); 
}); 

I know that $("#navbar li a") is targeting the proper element, as I have tested this. Is there anything wrong with my javascript code?

edit: this is a dropdown menu. #navbar ul is a nested list.

Answer 1

Use .hover

$('document').ready(function(){
    $("#navbar li a").hover(function(){
        $("#navbar ul").css("display","block"); 
    }); 
}); 

If you would like a fade in effect then just use .fadeIn

DEMO

$(function() {
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
});
});

For completeness here's a CSS only method:

(FYI this using this method won't fade it as per say, just make it appear on hover and then disappear when not on hover.)

DEMO

#div2 {
    width: 200px;
    height: 200px;
    background: red;
    display: none;
}

#div1:hover ~ #div2 {
    display: block;    
}

Answer 2

There is no "onmouseover"

The right syntaxsis is:

$("#navbar li a").on("mouseover", function(){
    $("#navbar ul").show() //Can use just show here
})