jQuery mouseenter mouseleave tool tips

问题

I have tried the following two methods to display hidden contents that comes with each div that has the class name avatar.

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

The first one uses hover and works perfectly when I have multiple avatar elements on the page.

Unfortunately the tool tip has a clickable link built in and hover does not allow me to click on the link.

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

Unfortunately the tool tip has a clickable link built in and hover does not allow me to click the link.

I than pieced together coding that I found here that uses mouseenter and mouseleave. This one also works and it allows me to click the link.

    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);
        }
    });

Unfortunately if you mouse over more than one of these avatars only the last one gets removed while others always remain.

My question is how do I use the second one which will fadeOut any active tool tips when I move on to another?

Am I missing something? Or doing this wrong altogether?

回答1:

If I understand correctly, I think what you want is to have a timeout on each tip. You can use .data to accomplish this by associating a timeout with each tip.

$('.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');
    }
});

Live demo on jsfiddle

Note: I also changed .bind() to .on() since .bind() is deprecated, and I changed it to use .show().

What was happening in your original code is that the timeout for the first tip was cleared when you hovered over the second tip because they all shared the same "hover" variable.

EDIT: In my haste I was incorrectly clearing the .data values. I should have been using .removeData(). I have fixed the code above.

Updated demo on jsfiddle

回答2:

The problem is in your timeout function.. Why are u even using it? http://jsfiddle.net/24MYq/9/ remove:

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

isn't this what you need or do you need that delay? if you really need it, I will edit my post and give you some working delay.

E: For a delay either higher the number inside the fadeOut() or add a .delay(number) afterwards while number is an int value (500 -> half a second)

回答3:

If you want them all to be removed when you mouse away, you can do so by changing var $this = $(this).contents('div:last-child') to var $this = $('.profile');

All tooltips will disappear at the same time, and the timeout will reset whenever you mouse over another avatar image, though.

来源：https://stackoverflow.com/questions/14816874/jquery-mouseenter-mouseleave-tool-tips

标签

jquery

mouseenter

mouseleave