Question

我的问题如下：我有一个触发器（a）和一个弹出窗口（div）。 div不会嵌套在锚点内。

当我将鼠标悬停在a上时，我希望div显示出来。
当我从一个div到另一个div时，我希望它能保持可见。
当我离开div时，我希望它能够关闭。
当我将鼠标悬停在a并且不进入div时离开时，我希望div关闭。

我得到了大部分的结果，但是现在我已经满足了所有的需求。 2。当检查a上的mouseleave时，我检查div上是否有mouseenter。如果是，我想中止mouseleave。如果没有，我想关闭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)
            };
    });

Answer 1

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

Answer 2

这很可能不起作用......不。我建议您同时向mouseenter元素添加mouseleave和<div>回调，让他们设置一个全局变量，告诉您的其他回调如何处理他们的事件，即“if全局变量为true，不要在mouseleave上隐藏弹出窗口，否则隐藏弹出窗口“或类似的东西。

另一种方法是在mouseleave回调试图隐藏弹出窗口时检查鼠标是否在弹出窗口内。这可能比它的价值要多得多。

Answer 3

我认为您的实施问题是mouseenter上的div将在mouseleave的{{1}}后不久发生。

这会给你类似的东西：

请注意，您必须确保从$('.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事件中访问同一个计时器。你可能想考虑使用Ben Alman的doTimeout plugin来帮助解决这个问题。与通过.popup_div / setTimeout手动操作相比，它（通常）会产生更清晰的代码。

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

3 个答案: