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

Question

I'm trying to do something that should be very simple, but it's causing this weird problem. Basically I have a bunch of identical divs on a page, each div has a nested div and paragraph content within that nested div. The nested div and all it's content is initially hidden using css. When the user hovers over the main div the nested div and all it's content fades into view.

It's working fine up to this part...

Now when the user's mouse leaves the div the nested div is once again hidden. Problem is when you move your mouse eratically over the various divs really fast back and forth the nested divs for some ceases to dissapear but stays in view. How to solve this?

Here is an example of the effect I'm trying to achieve, without copying their code :)

http://www.crackpixels.com/

Here is my code, you can run it as is, everything is linked absolute:

<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

I'm guessing it might be because $(this).children('div').fadeIn('fast'); transition is still running?

Try doing a $(this).children('div').stop().fadeIn(); !

Answer 3

尝试用mouseenter（）替换mouseover（）

Answer 4

In addition, you may want to look into the hoverIntent plugin:

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

…which helps prevent false triggers when people mouse over and out really fast.