Question

假设我有两个元素：一个导致特定div出现的锚点。在这种情况下，我无法将这两个包装到父容器中，因此整个标记必须如下：

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

最基本的问题是：当鼠标离开触发器时我想要隐藏信息窗口，但仅当光标没有超过它时。 我怎么能这样做？

帮助表示感谢，问候

Answer 1

如果你根本无法改变标记，你可以给它一个很好的淡入淡出效果，并利用淡入淡出不是即时的事实，这样的事情会处理每个.trigger / {{ 1}}对：

.info

You can try a demo here，您可以将这个信息分解为$(".trigger, .info").hover(function() { $(this).next().andSelf().filter(".info").stop().animate({opacity: 1 }); }, function() { $(this).next().andSelf().filter(".info").stop().animate({opacity: 0 }); });的一个函数和.trigger的一个函数，我只是让它更简洁一点。两个函数版本看起来like this：

.info

它的作用是$(".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 }); });它消失，mouseenter淡出（通过.animate()）...但是将鼠标从一个移动到另一个会让淡入淡出在将.stop()放入淡出并将其淡入之前发生1帧。对于用户，他们没有看到发生任何事情，当鼠标离开时，允许淡入淡出。 / p>

Answer 2

$('.trigger').live('mouseout',function (event) {
    if (!$(event.relatedTarget).is('.info'))
        $(this).next().hide();
});

jQuery鼠标移出而不隐藏特定元素

2 个答案: