Question

首先是一些代码：

我有很多这样的元素：

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

隐藏“标题”，当你继续“项目”时，“标题”进入。

我之前使用hover（）做了这个并且工作正常，但是现在我需要将它设置为live（），因为我正在添加一些带有ajax（）调用的“item”。

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

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

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

症状：当我鼠标输入我的“项目”时标题显示，然后立即消失，然后进入，然后熄灭。像疯了似的。我知道为什么，我想这是因为我的“标题”即使生活在“项目”中也优先，所以“item”不再是鼠标输入事件。所以“标题”离开，“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方法。

Answer 2

我花时间测试这个，所以我的答案有点晚了。以下是mouseleave演示

的用法

http://jsfiddle.net/DvReQ/

Dave解释了为什么mouseout不起作用，但mouseleave确实有效：

这是因为mouseout是默认的javascript事件，一旦光标离开元素就会触发，即使它是同一元素的子元素，而mouseleave是jQuery的改进版本，不计入进入子元素离开元素

我的live（）方法变得疯狂

2 个答案: