1

我正在尝试使用hoverintent 插件来替换以下 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 网站上的示例，我不知道如何实现这一点:(

有人有任何指示吗？提前致谢！

- - - 编辑 - - -

通过执行以下操作使悬停意图达到一定程度：

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);

现在，当我将鼠标移出而不是div时，问题就ul消失了。关闭但没有雪茄:(#nav#top

4

2 回答 2

0

如您所见： http: //jsfiddle.net/Cj8sj/您的 jQuery 代码有效。

我认为这是您遇到的 CSS 问题...我假设您已将 #nav 定位为浮动。是什么让#top 仅具有其非浮动内容的高度。您可以使用以下方法解决此问题：#top { overflow: hidden; }UL 和 #nav 元素中的相同。

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

更新：既然您已经发布了 CSS...对于绝对位置元素的相同效果，它们不会适应父级的高度。

于 2012-04-23T10:27:27.557 回答
0

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

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

这很好用。此外，这里的主体也与任何 javascript 方法相关。

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

导航悬停=假；subNavHover = 假；

当鼠标移入和移出明显元素时，只需将它们的变量设置为真/假。

接下来，在鼠标离开时，快速检查一下：

if( navHover )

或者

if( subNavHover )

如果任一变量设置为 true，请不要隐藏导航。如果你想要动画，你需要使用回调，也许还需要一个快速的超时延迟，这样它就不会隐藏得太快。

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

希望有帮助:)

于 2012-04-23T10:19:56.993 回答