jquery hoverintent - 一个元素上的mouseenter，另一个上的mouseleave

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 div中鼠标时，我的#top消失了。关闭但没有雪茄:(

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只有非浮动内容的高度。您可以使用以下命令解决此问题：#top { overflow: hidden; }对于UL和#nav元素也是如此。

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

更新：现在您已经发布了CSS ...位置绝对元素的效果相同，它们不会调整父级的高度。