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

所以我有一个幻灯片页脚，但是如果我在div上快速移动鼠标，它只会发生在div上的一个跳跃，但是我也想显示内容，我在这里创建了一个视频：这样你可以更好地理解它，如果我用鼠标在div上稍微慢一点，效果会很好

这是我的密码：

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>

打开

您需要hoverIntent，一个jquery插件。从文档中：

hoverIntent是一个插件，它试图确定用户的意图。。。就像一个水晶球，只能用鼠标移动！它的工作原理与jQuery的内置悬停类似（并且源于jQuery的内置悬停）。但是，它不是立即调用onMouseOver函数，而是等到用户的鼠标速度足够慢时才进行调用

---

阅读更多内容并下载。

网站的实时演示比屏幕广播有用得多。不知道哪里出了问题，但尝试将站点中的所有数字改为布尔值，比如stop（true，true）？请不要在每个JS变量前面加上

$

。可以这样做，以明确变量包含jQuery对象，但totalHeight是一个简单的字符串。这不是PHP。