检查（'div'）mouseenter（'a'）mouseleave

我的问题如下：我得到了一个触发器（a）和一个弹出窗口（div）。 div不会嵌套在锚内。检查（'div'）mouseenter（'a'）mouseleave

当我将鼠标悬停在a上时，我想让div显示出来。
当我从一个div转到div时，我希望它保持可见。
当我离开div时，我希望它关闭。
当我将鼠标悬停在a上而未进入div时，我想让div关闭。

我得到了大部分的想法，但现在我正在strugggeling与requierement没有。 2. 在检查mouseleave时，我检查div上是否有mouseenter。如果是这样，我想放弃鼠标。如果没有，我想关闭div。

我在做什么错？这甚至是正确的做法吗？

这里的标记：

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a> 
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

这里是jQuery的：

$('.popup_toggle').mouseenter(function() { 
     var element = $(this).next('.popup_div'); 
     $.data(this, 'timer', setTimeout(function() { 
      element.show(100); 
     }, 500)); 
    }); 

    $('.popup_toggle').mouseleave(function() { 
     clearTimeout($.data(this, 'timer')); 
      if($('.popup_div').mouseenter==true) 
      { 
       return false; 
      } 
      else 
      { 
       $('.popup_div').hide(100) 
      }; 
    });

来源

2011-10-11 chabuya

你想要做的事情很简单。当进入触发器时，识别面板（图层，弹出窗口，任何），使用.data（）保存彼此的引用，并让事件处理程序检查相关目标是触发器（从面板视图）还是面板从触发器视图）。我把东西扔在一起。看看控制台日志，看看这是如何工作的... http://jsfiddle.net/rodneyrehm/X5uRD/

来源

2011-10-11 12:05:50 rodneyrehm

感谢您的回复并创建了一个示例！但即使通过它看，我不知道你在那里做什么。我必须承认，我在jQuery或编程方面没有以前的经验，如果在使用它时出现问题，我需要能够维护自己的代码。我不能说为什么第一个答案是错误的编码，但我现在要用这种方法，因为我实际上可以理解它:) – chabuya

这将极有可能无法正常工作......没有。我建议你增加一个mouseenter和mouseleave回调给你<div>元素，让他们设置一个全局变量，告诉你的其他回调如何处理他们的事件，即“如果全局变量为真，不要隐藏弹出窗口mouseleave，否则隐藏弹出“或类似的东西。

另一种方法是在mouseleave回调试图隐藏弹出框时检查鼠标是否位于弹出框内。这可能比它值得的工作多得多。

来源

2011-10-11 11:05:32

感谢您的快速回复，我尝试了全局变量和一个新的计时器，它的作品就像一个魅力！ – chabuya

-1用于提示全局变量并且不注意event.relatedTarget。抱歉。 – rodneyrehm

呃... relatedTarget只能工作，如果你在离开链接时立即进入弹出窗口，对吗？正如axtavt明确指出，弹出窗口不是**链接的一部分，我没有假设它们是直接的邻居。 –

我相信你的实施的问题是div上的mouseenter将在从amouseleave不久后触发。

这将使你是这样的：

$('.popup_toggle').mouseenter(function() { 
    // Clear any pending "hide" timer 
    // Set a show timer 
}); 

$('.popup_toggle').mouseleave(function() { 
    // Clear any pending "show" timer 
    // Set a hide timer 
}); 

$('.popup_div').mouseenter(function() { 
    // Clear any pending "hide" timer 
});

请注意，你必须确保你无论从.popup_toggle事件和.popup_div事件访问同一个计时器。您可能需要考虑使用Ben Alman的doTimeout plugin来解决这个问题。它（通常）会比手动使用setTimeout/clearTimeout产生更清晰的代码。

来源

2011-10-11 11:44:25 zjs

检查（'div'）mouseenter（'a'）mouseleave

回答

相关问题