Question

Let’s say I’ve got two elements: an anchor which causes an occurence of a particular div.
In that single case I’m not able to wrap these two into a parent container, thus the whole markup has to be as following:

<a href="#" class="trigger">click me</a>
<div class="info">info displayed on trigger hover</a>

The very basic question is: when the mouse leaves the trigger I want to hide the info window but only if the cursor is not over it.
How can I do that?

Help appreciated,
regards

Answer 1

If you can’t change the markup at all, you can give it a nice fade effect, and take advantage of the fact a fade isn’t instant, something like this would handle every .trigger/.info pair:

$(".trigger, .info").hover(function() {
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 1 });
}, function() {
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 0 });
});​​​​​​

You can try a demo here, you could break this info one function for .trigger and one for .info, I was just keeping it a bit more terse. The two function version would look like this:

$(".trigger, .info").hover(function() {
    $(this).next().stop().animate({opacity: 1 });
}, function() {
    $(this).next().stop().animate({opacity: 0 });
});
$(".info").hover(function() {
    $(this).stop().animate({opacity: 1 });
}, function() {
    $(this).stop().animate({opacity: 0 });
});

What this does is on mouseenter it fades in, on mouseleave it fades out (via .animate())…but moving the mouse from one to the other will let the fade happen for 1 frame before putting a .stop() to the fade-out and fade it back in. To the user, they don’t see that anything happened, when the mouse leaves both, the fade is allowed to continue.