Question

所以我有一个滑动页脚，但是如果我快速用鼠标滑过div，它只是跳转div，但我想要显示内容，我在这里创建了一个视频：{{3所以你可以更好地理解它，如果我用鼠标悬停在一点点慢，它就可以正常工作。

这是我的代码：

var $footer         = $('footer'),
        $footerHeader  = $('.footer-header'),
        $footerDisplay = $('.footer-display'),
        $totalHeight   = ((parseInt($footerDisplay.css('height'))) + 50)+'px';
$('footer').stop(1,1).hover(function(){
    //mouse in
    $footerHeader.css('visibility','hidden');
    $footerDisplay.stop(1,1).slideUp(function(){
        $(this).show();
        $footer.css('height',$totalHeight);
    });
    $footer.stop(1,1).animate({'margin-top':'-'+$totalHeight});

},function(){
    //mouse out
    $footer.stop(1,1).animate({'margin-top': '-57px','height':'57px'});
    $footerDisplay.stop(1,1).slideUp();
    $footerHeader.css('visibility','visible');
});

和HTML：

<footer>
    <div class="footer-header">
        <h3>
            <span class="sprite arrow-footer"><!-- dirty hack--></span>
            OPEN
        </h3>
    </div><!--end footer-header-->

    <div class="footer-display clearfix">
            <?php dynamic_sidebar("the_footer"); ?>
    </div><!-- end footer-display-->
</footer>

Answer 1

你需要一个jquery插件hoverIntent。来自文档：

hoverIntent是一个插件，试图确定用户的意图......就像一个水晶球，只有鼠标移动！它的工作方式与jQuery的内置悬停类似（并且源自）。但是，它不会立即调用onMouseOver函数，而是等待用户的鼠标在拨打电话之前放慢速度。

了解详情并下载here。

仅当鼠标位于div上时，Jquery才会在悬停时处于活动状态

1 个答案: