检查鼠标弹出是否结束

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()函数替换，用于在页面加载后添加的元素。例如，之后创建的脚本元素。

为了让弹出框在用户悬停弹出框本身时保持可见，它需要与当前悬停的元素绑定。弹出窗口也必须是＆＃34;内部＆＃34;它正在悬停的元素，因为如果用户mouseleave()是＆＃34;文件＆＃34;按钮，它将触发该事件，并且没有办法解决这个问题。

除非您想尝试计时器方法，否则这就是它的外观。 （ISH）

解决方案

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

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

基本上，我只是将弹出div添加到当前的btn文件中，然后显示它。其余的都在CSS中。

替代解决方案

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

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);
});

Answer 2

使用jquery的mouseover和mouseout函数....如下面的example ..

$("#container").mouseover(function() {
   $("#hello").css('visibility', 'visible');
});

$("#container").mouseout(function() {
  $("#hello").css('visibility', 'hidden');
});

Answer 3

我知道这已经过时了......但这个片段会帮助别人。

$('#btnfile').hover(function (e) {
    $("#popup").dialog("option", {
        position: [e.pageX - 5, e.pageY - 5]
    });
    $(".ui-dialog-titlebar").hide();
    $("#popup").dialog("open");
}, function (e) {

    $("#popup").bind('mouseleave', function () {
        $("#popup").dialog('close');
    });
});

$("#popup").dialog({ //create dialog, but keep it closed
    autoOpen: false,
    width: 'auto',
    height: 'auto'
});

这是一个小提琴：http://jsfiddle.net/9LHL6/