jquery - 检查鼠标是否位于弹出窗口上

Question

我制作了一个弹出框，将鼠标悬停在其上后会弹出。弹出窗口将在 mouseleave 事件中隐藏。但通过这种方式，如果鼠标悬停在弹出框中，弹出窗口将隐藏，即使鼠标位于弹出框中，我也想保持它不隐藏，并且链接有任何代码吗？我当前的代码是，

$('.btnfile').live("mousemove", function() {  

$("div#popup").show();
$("div#popup").css('top', $(this).position().top).css('left',$(this).position().left);

}).live("mouseleave", function(e) {
// here the code for check if mouse is still hovered in the box, if hovered 
//on the box, skip the function otherwise hide the box

$("div#popup").hide();

});

Answer 1

说明

.live()函数，从 JQuery 1.7 开始已弃用，应替换为 .on()函数，用于页面加载后添加的元素。例如脚本随后创建的元素。

为了使弹出框在用户悬停弹出框本身时保持可见，它需要与当前悬停的元素绑定(bind)。弹出窗口还必须位于其悬停的元素“内部”，因为如果用户 mouseleave() 使用"file"按钮，它将触发该事件，并且没有办法解决这个问题。

除非您想尝试计时器方法，否则它就是这样的。 (大约)

解决方案

Here's an example如何做到这一点。
这是我的解决方案:

$('.btnfile').mouseenter(function(){
    $(this).prepend($("#popup"));
    $("#popup").show();
}).mouseleave(function(){
    $("#popup").hide();
});

基本上，我只是将弹出 div 添加到当前 btnfile 的悬停位置，然后显示它。其余部分在 CSS 中。

替代解决方案

您可以添加一个计时器事件，检查用户是否离开按钮，然后在隐藏弹出窗口之前，他们有“x”时间将鼠标悬停在弹出窗口上。

Here's an example添加了计时器。

var thisTimer = null;
var timeoutTime = 1000; //1 second
var insidePopup = false;

$("#popup").mouseenter(function(){insidePopup = true;})
               .mouseleave(function(){
                   insidePopup = false;
                   $(this).hide();
                });

//lots of clearTimeouts, but it is possible
$('.btnfile').mouseenter(function(){
    $(this).prepend($("#popup"));
    $("#popup", this).show();

    clearTimeout(thisTimer);
}).mouseleave(function(){
    clearTimeout(thisTimer);
    thisTimer = setTimeout(function(){
        if(!insidePopup)
            $("#popup").hide();
        clearTimeout(thisTimer);
    }, timeoutTime);
});