如何使用jquery在hover/mouseover上淡入div？

Question

我有一个div设置为display:hidden.我希望display:block在某个元素(#navbar li a)悬停时将此div设置为.这是我的javascript.

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

我知道这$("#navbar li a")是针对正确的元素,因为我测试了这个.我的javascript代码有什么问题吗？

编辑:这是一个下拉菜单.#navbar ul是一个嵌套列表.

Answer 1

使用 .hover

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

如果你想要淡出效果,那就试试吧 .fadeIn

DEMO

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

为了完整性,这里只是一个CSS方法:

(仅供参考,使用这种方法不会褪色,只是让它显示在悬停上,然后在不悬停时消失.)

DEMO

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

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

Answer 2

没有“鼠标悬停”

正确的语法是：

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