javascript - 仅当鼠标位于 div 上时，Jquery 在悬停时处于事件状态

Question

所以我有一个向上滑动的页脚，但是如果我将鼠标快速移动到 div 上，它就会跳到 div 上，但我还想显示内容，我在这里创建了一个视频:http://screencast.com/t/CDQUDQP3所以你可以更好地理解它，如果我将鼠标悬停在上面的速度稍微慢一点，它就可以正常工作。

这是我的代码:

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

您需要 hoverIntent，一个 jquery 插件。来自文档:

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.

阅读更多并下载here .