jquery菜单盘旋

我有一个菜单，当我鼠标hover在div上时它会显示，鼠标输出时它会淡出。 问题是，如果你翻过菜单的任何一个孩子，菜单就会消失（因为从技术上来说，如果你超过其中一个孩子，那么你就不会超过父母）是否有办法让孩子们翻身不会算作mouseout？ 这是我的代码： http ： //jsfiddle.net/32bLg/

Answer 1

这是一个非常简单的问题，大多数人倾向于使用计时器和特殊情况检查大量复杂化。 简单的解决方案是通过标记。 将hover目标和菜单放在同一父级下，并在父级上跟踪hover。 像这样 。 您可能还想使用hoverIntent jQuery插件来避免错误的hover事件。

用户体验说明：持续超过500毫秒的淡入淡出动画非常粗鲁。 请不要那样做。

Answer 2

这是一个简单的解决方案： http ： //jsfiddle.net/32bLg/16/

Answer 3

您需要在hover div中包含菜单div。 见http://jsfiddle.net/T72jm/2/ 。

您会注意到（至少在Chrome中）如果您将鼠标hover在hoverdiv上并且不执行任何操作，则菜单div将淡出。

Answer 4

看看这些很好的例子：

不错的JQuery菜单

一个特定的多层次：

多级JQuery菜单

链接2中的HTML：

  
 
1 HTML
 
2 CSS
 
3 Javascript 
 
3.1 jQuery 
 
3.1.1 Download
 
3.1.2 Tutorial
 
 
 
3.2 Mootools
 
3.3 Prototype
 
 
  

CSS：

  #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; } 

JS：

 function mainmenu(){ $(" #nav ul ").css({display: "none"}); // Opera Fix $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); } $(document).ready(function(){ mainmenu(); }); 

Answer 5

这是我的修复

 window.menushowing = false; $('#menu').hover( function() { window.menushowing = true; }, function() { window.menushowing = false; hideMenu(); }); function hideMenu() { if (window.menushowing) return; $('#menu').animate({ opacity: 0 }, 1500, function() { $('#menu').hide(); }); } $('#examplePic').hover( function() { window.menushowing = true; $('#menu').css('display', 'block'); $('#menu').animate({ opacity: 1 }, 1500); }, function() { hideMenu(); });