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

Question

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

到目前为止这部分工作正常...

现在，当用户的鼠标离开 div 时，嵌套的 div 将再次隐藏。问题是，当您在各个 div 上快速地来回移动鼠标时，某些嵌套的 div 会停止消失，但仍保留在 View 中。怎么解决这个问题？

这是我试图实现的效果的示例，无需复制他们的代码:)

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。