jquery - 我的 live() 方法变得疯狂

Question

首先是一些代码:

我有很多这样的元素:

<section class="item>
     <div class="caption">
     </div>
</section>

“标题”被隐藏，当您转到“项目”时，“标题”就会出现。

我之前用hover() 做过这个并且工作得很好，但现在我需要让它live()，因为我通过ajax() 调用添加了更多“项目”。

现在发生的情况是，当显示“标题”时，它优先于项目，因为它的样式是绝对的。这里还有一些其他代码:

.caption {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: none;
}

我喜欢这种风格，因为有时我的“项目”可以有任何尺寸，而“标题”就在它后面。但让我们继续吧。

症状:当我用鼠标输入“项目”时，标题会显示，然后立即消失，然后进入，然后消失。就像疯了一样。我知道为什么，我想这是因为我的“标题”即使生活在“项目”中也优先，所以“项目”不再出现在鼠标输入事件中。因此“caption”离开，“item”触发另一个鼠标输入。依此类推，直到时间结束。

这是我的 javascript，我该如何让 live() 表现得像之前使用 hover() 那样？

$('.item').live({
    mouseenter : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 1,
            height: 'toggle'
            }, 'fast');

    },

    mouseout : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 0,
            height: 'toggle'
        }, 'fast');     

    }

})  

谢谢!

Answer 1

mouseout 应该是 mouseleave 才能正确模仿 $.fn.hover 方法。