0

我尝试了以下两种方法来显示每个具有类名avatar的 div 附带的隐藏内容。

<div class="avatar"><a><img src="avatar.png" width="36" height="36"><div class="profile">Users Profile with Link</div></a></div>

当我在页面上有多个头像元素时，第一个使用悬停并完美运行。

不幸的是，工具提示内置了一个可点击的链接，并且悬停不允许我点击该链接。

    $('.avatar a').hover(function () {
        $(this).contents('div:last-child').css({
            display : 'inline'
        });
    }, function () {
        $(this).contents('div:last-child').css({
            display : 'none'
        });
    });

不幸的是，工具提示内置了一个可点击的链接，并且悬停不允许我点击该链接。

然后我拼凑了我在这里找到的使用mouseenter和mouseleave的编码。这也有效，它允许我单击链接。

    var hover = null;
    $('.avatar a').bind('mouseleave', function() {
        var $this = $(this).contents('div:last-child');
        hover = setTimeout(function() {
            $this.fadeOut(400);
        }, 800);
    });

    $('.avatar a').bind('mouseenter', function() {
        $(this).contents('div:last-child').css({display:'block'});
        if (hover !== null) {
            clearTimeout(hover);
        }
    });

不幸的是，如果您将鼠标悬停在多个这些化身上，则只有最后一个会被删除，而其他人则始终保留。

我的问题是如何使用第二个，当我转到另一个时，它会淡出任何活动的工具提示？

我错过了什么吗？还是完全做错了？

4

3 回答 3

1

问题出在你的超时功能上。你为什么还要使用它？ http://jsfiddle.net/24MYq/9/ 删除：

    if (hover !== null) {
    clearTimeout(hover);
}

这不是你需要的还是你需要延迟？如果你真的需要它，我会编辑我的帖子并给你一些工作延迟。

E：对于延迟，或者在 fadeOut() 内的数字更高，或者在 number 是一个 int 值（500 -> 半秒）之后添加一个 .delay(number)

于 2013-02-11T17:30:08.587 回答
0

如果您希望在鼠标移开时将它们全部删除，可以通过更改 var $this = $(this).contents('div:last-child') 为 var $this = $('.profile');

所有工具提示将同时消失，但是，只要您将鼠标悬停在另一个头像图像上，超时就会重置。

于 2013-02-11T17:30:18.337 回答
0

如果我理解正确，我认为您想要的是在每个提示上都有一个超时。您可以.data通过将超时与每个提示相关联来完成此操作。

$('.avatar a').on('mouseleave', function() {
    var $tip = $(this).contents('div:last-child');
    $tip.data('hover', setTimeout(function() {
        $tip.fadeOut(400);
        $tip.removeData('hover');
    }, 800));
});

$('.avatar a').on('mouseenter', function() {
    var $tip = $(this).contents('div:last-child').show();
    var hover = $tip.data('hover');
    if (hover) {
        clearTimeout(hover);
        $tip.removeData('hover');
    }
});

jsfiddle 上的现场演示

注意：我也更改.bind()为.on()因为.bind()已弃用，我将其更改为使用.show().

原始代码中发生的情况是，当您将鼠标悬停在第二个提示上时，第一个提示的超时被清除，因为它们都共享相同的“悬停”变量。

编辑：在我匆忙中，我错误地清除了这些.data值。我应该一直在使用.removeData(). 我已经修复了上面的代码。

更新了 jsfiddle 上的演示

于 2013-02-11T17:54:54.707 回答