Question

my problem is following: I got a trigger(a) and a popup(div). The div doesn t lie nested inside the anchor.

When I hover over a, I want the div to show up.
When I go from a to the div, I want it to stay visible.
When I leave the div, I want it to close.
When I hover over a and leave without entering the div, I want the div to close.

I got most of that figured out, but now I m struggeling with requierement no. 2. When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the 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>

Here s the 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

你试图做的是很简单。在进入触发点时,确定小组(无论大小),在使用数据(数据)时不相互提及,如果相关目标(从小组的角度来看)或小组(从触发小组的角度来看),则对事件处理器进行检查。我一心一想一想。查阅青少年日志,看看看这一工程是如何运作的:

Answer 2

这很可能不会奏效。我建议你增加<条码>。背书:<div> 元件,并设定一个全球变量,说明如何处理其事件,即“如果全球变数真,就不掩饰烟雾,否则就隐藏着烟雾”或类似的东西。

The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.

Answer 3

我认为,你执行的问题是,<条码>上>,<条码>在<条码>后即发射<条码>。

This would give you something like:

$( .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 <>/code>活动和.popup_div活动中获取同一时间。您不妨考虑使用Ben Alman s dotimeout plugin来协助这项工作。该编码(通常)比人工操作<编码>>> 定时<>/编码>/<代码> 脱色/编码>的代码更为清晰。

友情链接