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

我试图做一些应该是非常简单的，但它导致这个奇怪的问题。基本上我在一个页面上有一堆相同的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 -->