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

您需要使用 . 显式检查mouseenter和mouseleave事件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 回答