如何淡入使用jquery悬停/鼠标悬停div？

我有一个设置为display:hidden的div。当某个元素（#navbar li a）悬停时，我希望将此div设置为display:block。这是我的JavaScript。如何淡入使用jquery悬停/鼠标悬停div？

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

我知道$("#navbar li a")的目标是正确的元素，因为我已经测试了这一点。我的JavaScript代码有什么问题吗？

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

来源

2013-07-19 Sam D20

没有“的onmouseover”

正确syntaxsis是：

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

来源

2013-07-19 20:25:54 drip

是的，有什么不对的代码，jQuery的没有一个onmouseover事件，你在做什么可能寻找的是mouseenter事件，如汽车无上鼠标移动mouseover火灾：

$(document).ready(function(){ 
    $("#navbar li a").on('mouseenter', function(){ 
     $("#navbar ul").show(); 
    }); 
});

，另一方面

，你也许可以做到这只与CSS？

来源

2013-07-19 20:26:03 adeneo

使用.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唯一的方法：

（仅供参考，使用这种方法不会流行E - 这是每说，只是让出现在盘旋，然后消失当不上悬停。）

DEMO

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

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

来源

2013-07-19 20:26:36 Vector

所有的答案都显示/隐藏。你的代码也是。问题是关于褪色。

使用.fadeIn() .fadeOut而不是显示隐藏

http://api.jquery.com/fadeIn/

来源

2013-07-19 20:30:21 zod

如果你想在div实际上褪色从不透明到100％，那么你已经开始用不透明的说80％（显示为0.8）然后褪去100％（显示为1.0）。既然你想从不透明度开始，div需要用“无显示”来隐藏，那么可以在不看到效果的情况下设置不透明等级，然后使其可见并且褪色到100％：

$("div.mydivclass").on("mouseenter", function() { 
    $(this).css("display", "none"); 
    $(this).fadeTo("fast", 0.8); 
    $(this).css("display", ""); 
    $(this).fadeTo("10", 1.0); 
});

来源

2015-08-03 00:28:34

如何淡入使用jquery悬停/鼠标悬停div？

回答

相关问题