jQuery的hoverintent - 一个元素的mouseenter，鼠标离开另一个

Question

我试图使用hoverintent plugin替换下面的JavaScript代码：

$('#top').on('mouseenter', '#nav', function(e){ 
    $('#top ul').delay(100).slideDown(300); 
    $('#top').stop().animate({ 
     height: 230 
    }, 400); 
}); 

$('body').on('mouseleave', '#top', function(e){ 
    $('#top ul').slideUp(300); 
    $('#top').stop().animate({ 
     height: 97 
    }, 400); 
}); 

我的HTML是：

<div id="main"> 
    <div id="top"> 
     <a href="#" class="logo"></a> 
     <ol id="nav"> 
      <li><a href="#">Home</a></li> 
      <li> 
       <a href="#">Company</a> 
       <ul> 
        <li><a href="#">About us</a></li> 
        <li><a href="#">Management</a></li> 
        <li><a href="#">Careers</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Products</a> 
       <ul> 
        <li><a href="#">Product 1</a></li> 
        <li><a href="#">Product 2</a></li> 
        <li><a href="#">Product 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Contact Us</a></li> 
     </ol> 
    </div> 
</div> 

这里是我的CSS：

html { background:#fff; font-family: Arial, Helvetica, sans-serif; } 

#main { position: relative; width: 860px; margin: 0 auto; text-align: left; padding: 0 40px; } 

#top { width: 860px; height: 97px; border-bottom: 1px solid #f0f1f0; padding-bottom: 30px; } 
#top a.logo { display: block; float: left; width: 186px; height: 55px; margin-top: 40px; background: #ccc; } 
#top a.logo:hover { background: #ddd; } 

#top ol { position: absolute; top: 37px; right: 40px; display: block; overflow: visible; z-index: 10; } 
#top ol li { display: inline-block; float: left; text-align: right; margin-left: 24px; padding-top: 20px; } 
#top ol li a { display: block; font-family: "Arial Narrow", "Helvetica Narrow", sans-serif; font-size: 0.8em; color: #989f98; text-decoration: none; text-transform: uppercase; margin-bottom: 5px; } 
#top ol li a.current, 
#top ol li a:hover { color: #e9292f; } 

#top ul { display: none; padding-bottom: 6px; max-width: 95px; border-top: 1px dotted #d1d1d1; } 
#top ul li { display: block; float: none; margin-left: 0; padding-top: 3px; } 
#top ul li a { font-size: 0.7em; font-family: Arial, Helvetica, sans-serif; text-transform: none; } 

这里是什么，我想实现快速图：

所有我想要的是为用户鼠标悬停#nav，只有有它消失的时候，他们把他们的鼠标移出的#top（灰在我的图）。鉴于对hoverintent网站上的例子，我不知道如何实现这一目标:(

任何人有任何指针？在此先感谢！

------编辑------

已经得到hoverintent通过做工作到一个点：

var config = {  
    over: function(){ 
     $('#top ul').delay(100).slideDown(300); 
     $('#top').stop().animate({ 
      height: 230 
     }, 400); 
    }, 
    timeout: 0,  
    out: function(){ 
     $('#top ul').slideUp(300); 
     $('#top').stop().animate({ 
      height: 97 
     }, 400); 
    } 
}; 

$('#nav').hoverIntent(config); 

的问题是我现在的ul消失的时候我鼠标移出的#nav，而不是我#top DIV℃。输，但没有雪茄:(

Answer 1

这可能不适合你的情况，但如果你想要一个非JavaScript方法：

http://www.ryancollins.me/?p=1041

这种运作良好。此外，玩这里的校长也与任何javascript方法相关。

基本上，你需要一些变量。

navHover = false; subNavHover = false;

将鼠标移入和移出显而易见的元素时，只需将它们的变量设置为true/false即可。

接下来，当鼠标离开两个，做一个快速检查：

if(navHover) 

或

if(subNavHover) 

如果两个变量被设置为true，不隐瞒的资产净值。如果你想要动画，你需要使用回调，并且可能需要一个快速的超时延迟，以避免过早隐藏。

但是如果我是你的话，我会选择CSS版本！

希望帮助:)

Answer 2

，你可以看到：http://jsfiddle.net/Cj8sj/ jQuery代码的工作。

我认为它是一个CSS问题，你有...我假设你已经定位你的#nav与浮动。只有非浮动内容的高度才是最佳选择。您可以使用以下方法解决此问题：#top { overflow: hidden; } UL和#nav元素中的内容相同。

请提供一些CSS来，如果这不能解决您的问题

更新：现在你已经发布了三网融合的位置绝对要素相同的效果，他们并不适应母公司的高度。