Jquery显示div在hover然后当用户徘徊在div隐藏它帮助？

我有一个菜单，当我将其中一个链接显示为div时。 我希望用户能够将鼠标hover在这个div上，但当用户将鼠标hover在div之外时（我认为它被称为mouseout）我希望它隐藏起来。

想象一下css中的下拉菜单，用户将鼠标hover在链接上并显示子导航，当用户徘徊或远离链接时子子导航消失。 如何用jquery完成？

这就是我所拥有的：

$(document).ready(function(){ //when user hovers over plans the mainnavbottom is shown $(".plans").hover( function() { $(".mainnavbottom").show("fast"); }, function(){ $(".mainnavbottom").mouseout.hide("slow"); }); }); 

Answer 1

尝试这样的事情：

 $('.mainnavbottom').bind('mouseenter mouseleave', function(event) { switch(event.type) { case 'mouseenter': // when user enters the div $(".mainnavbottom").show("fast"); break; case 'mouseleave': // leaves $(".mainnavbottom").hide("slow"); break; } }); 

如果你想附加一个包含例如ajax加载内容的div，这段代码特别有用，但是它应该可以很好地处理你的css菜单。

希望这可以帮助

Answer 2

尝试

  $(document).ready(function(){ //when user hovers over plans the mainnavbottom is shown $(".plans").mouseover(function() { $(".mainnavbottom").show("fast"); }).mouseout(function(){ $(".mainnavbottom").hide("slow"); }); }); 

Answer 3

你描述的是：当鼠标hover在计划上时显示：

 $('.plans').live('mouseover mouseenter', function() { $(".mainnavbottom").show("fast"); }); 

当鼠标在mainnavbottom上时隐藏：

 $('.mainnavbottom').live('mouseout mouseleave', function() { $(".mainnavbottom").hide("slow"); }); 

所以，这真的是两件事在不同的事情上。