如何解决这个烦人的jQuery鼠标悬停问题？

Question

我试图做一些事情， 应该是很简单的，但它是造成这个奇怪的问题。 基本上我在页面上有一堆相同的div，每个div在嵌套的div中有一个嵌套的div和段落内容。 嵌套的div及其所有内容最初都是使用css隐藏的。 当用户将鼠标悬停在主div上时，嵌套的div及其所有内容都会淡入视图。

这部分工作正常......

现在，当用户的鼠标离开div时，嵌套的div再次被隐藏。 问题是当你在各种div之间移动你的鼠标时，非常快速地来回移动嵌套的div有些停止消失但仍然在视野中。 怎么解决这个？

这是我试图实现的效果的一个例子，而不复制他们的代码:)

http://www.crackpixels.com/

这是我的代码，你可以按原样运行，一切都是绝对链接的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$(document).ready(function() {

    // when user hovers over box
    $('.box').mouseover(function() {
        $(this).children('div').fadeIn('fast');
    });

    // when user's mouse leaves box
    $('.box').mouseleave(function() {
        $(this).children('div').hide();
    });

});
</script>

<style>
.box {
    padding: 5px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background: #F5F5F5;
    margin: 0 10px 0;
}
.box div {

    display: none; /* hide initially */

    position: absolute;
    width: 288px;
    height: 175px;
    margin: -175px 0 0;
    background: #444;
    color: #fff;
}
</style>

<div class="box">
    <img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
    <div>
        <p>
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo
        </p>
    </div>
</div><!-- box -->

<div class="box">
    <img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
    <div>
        <p>
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo
        </p>
    </div>
</div><!-- box -->

<div class="box">
    <img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
    <div>
        <p>
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo
        </p>
    </div>
</div><!-- box -->

<div class="box">
    <img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
    <div>
        <p>
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo
        </p>
    </div>
</div><!-- box -->

<div class="box">
    <img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
    <div>
        <p>
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo<br />
            Hello world foo bar foo
        </p>
    </div>
</div><!-- box -->

Answer 1

使用mouseenter而不是mouseover 。

Answer 2

我猜这可能是因为$(this).children('div').fadeIn('fast'); 过渡仍在运行？

尝试做一个$(this).children('div').stop().fadeIn(); ！

Answer 3

尝试用mouseenter（）替换mouseover（）

Answer 4

另外，您可能需要查看hoverIntent插件：

http://cherne.net/brian/resources/jquery.hoverIntent.html

...当人们快速地抄袭和躲避时，它有助于防止误触发。