0

所以基本上我试图div.show在悬停时淡入,然后当你停止悬停时,让它淡入不透明度为 0。

但是,当您停止悬停时,我无法让 div 淡化回 0。

这是我的代码:

$(document).ready(function(){
    $("div.post.photo").live('hover', function() {
        $(this).children("div.show").fadeTo("slow", .7);
    }, function(){
        $(this).children("div.show").fadeTo("slow", 0);
    });
});

谢谢

4

4 回答 4

2

您需要使用 . 显式检查mouseentermouseleave事件event.type。您不需要将它们绑定两次。

$(document).ready(function(){
    $("div.post.photo").live('hover', function(event) {

        if( event.type === 'mouseenter') 
            $(this).children("div.show").fadeTo("slow", .7);
        else if( event.type === 'mouseleave' )
            $(this).children("div.show").fadeTo("slow", 0);
    });
});

这是一个小提琴。我个人会使用.on,但我不确定您使用的是什么版本的 jQuery。

于 2011-12-15T21:13:55.380 回答
1

我很确定您应该将其淡化回 1,而不是 0。也live()只需要一个处理程序。您需要单独附加鼠标移出事件。

小提琴

于 2011-12-15T20:55:57.567 回答
1

我发现如果你使用.hover()而不是,这会起作用.live(),所以我认为问题在于.live()它不支持悬停事件,可能是因为.live()只有一个处理函数,而不是两个。

在 jQuery 1.7+ 中,这似乎有效(将其分解为两个事件处理程序并现代化为.on()):

$(document).ready(function(){
    $(document.body).on("mouseenter", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .7);
        }
    );

    $(document.body).on("mouseleave", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .0);
        }
    );
});

你可以在这里看到它的工作原理:http: //jsfiddle.net/jfriend00/YV2nU/

仅供参考,我切换到.on()是因为.live()在 jQuery 1.7+ 中已弃用。

于 2011-12-15T21:08:37.257 回答
0

您的问题是,hover它不是 Javascript 事件,它是mouseenterandmouseleave事件的 JQuery 简写,因此不能在这样的live方法中使用。您需要分别绑定它们。此外,您应该注意该.live()方法已被弃用。JQuery 文档说明了哪些方法更适合使用。

于 2011-12-15T21:05:02.963 回答