如何解決這個煩人的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

...當人們快速地抄襲和躲避時，它有助於防止誤觸發。