jquery悬停最后一个元素失败

Question

我有几个在传递鼠标时动画的div：

<div class="ivideo">
<a href="#">
<img src="default01.jpg" width="190" height="142" />                
</a>
</div>

<div class="ivideo">
<a href="#">
<img src="default02.jpg" width="190" height="142" />                
</a>
</div>

<div class="ivideo">
<a href="#">
<img src="default03.jpg" width="190" height="142" />                
</a>
</div>

我在这种情况下使用hoverIntent jquery插件：

var configVideo = {
                sensitivity: 3,
                interval: 100,
                over: videoOver,
                timeout: 200,
                out: videoOut
            };

    $(".ivideo").hoverIntent( configVideo );

    function videoOver(){
        $('img',this).animate({ 
                opacity: 0.3
            }, 100 );

            $('<span><\/span>').appendTo($('a',this));
            $('span',this).fadeIn(100);

    }

    function videoOut(){
            $('img',this).animate({ 
                opacity: 1
            }, 100 );

            $('span',this).fadeOut(100 ,function() {$(this).remove()});
    }

我的问题是所有元素反应良好（当我快速使用鼠标时），但最后一个div总是会失败（总是卡在mouseout中）事件）

我的错误是什么？我希望你的帮助。

Answer 1

看这里

实际上，所有元素都会失败，但你一个接一个地快速测试它们，并在出现时用鼠标停止你哪里完成了，对吧？
问题是 div 将自动具有 100% 的宽度，因此如果您不使用鼠标向下或离开文档，则无法离开它。
这就是为什么您需要设置固定宽度或使用其他元素。