检查('div')mouseenter('a')mouseleave

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() 保存彼此的引用，并让事件处理程序检查相关目标是否是触发器（从面板视图）或面板（从触发器视图）。我把一些东西放在一起。查看控制台日志以了解其工作原理\xe2\x80\xa6 http://jsfiddle.net/rodneyrehm/X5uRD/

\n