jQuery鼠标滑鼠工具提示

Question

我尝试了以下两种方法来显示每个具有类名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);
        }
    });

不幸的是，如果你鼠标超过一个以上的这些化身，只有最后一个被移除，而其他总是留下。

我的问题是，当我转到另一个工具时，如何使用第二个fadeOut的活动工具提示呢？

我是不是遗漏了什么？还是完全做错了？

Answer 1

如果我的理解是正确的，我认为你想要的是在每个提示上有一个超时。通过将超时与每个提示关联起来，您可以使用.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');
    }
});

小提琴现场演示

注意:我还将.bind()更改为.on()，因为不推荐使用.bind()，并将其更改为使用.show()。

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

编辑:在匆忙中，我错误地清除了.data值。我应该使用.removeData()的。我已经把上面的密码修好了。

关于jsfiddle的更新演示

Answer 2

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

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

这不是你需要的吗?还是你需要那个延迟？如果你真的需要它，我会编辑我的文章，并给你一些工作延误。

对于延迟，可以在fadeOut()中的数字更高，或者在数字为int值(500 ->半秒)的情况下添加一个.delay(数字)。

Answer 3

如果您想在鼠标离开时将它们全部移除，则可以通过将var $this = $(this).contents('div:last-child')更改为var $this = $('.profile');来实现。

所有的工具提示将在同一时间消失，当你在另一个化身图像上鼠标时，超时将被重置。