检查鼠标是否在弹出窗口上

Question

我已经做了一个弹出框，鼠标悬停在它上面就会弹出。popup将隐藏在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()函数。例如，之后创建的脚本元素。

为了使弹出框在用户悬停弹出框时保持可见，它需要与当前悬停的元素绑定。弹出窗口还必须位于它所悬停的元素的“内部”，因为如果用户点击“mouseleave()”按钮，它将触发该事件，这是没有办法的。

​

​

除非你想尝试计时器方法，否则它看起来就是这样的。(ish)

​

​

解决方案

如何做到这一点的Here's an example。

这是我的解决方案：

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

基本上，我只是将弹出窗口div放在当前its文件之前悬停，然后显示它。其余部分在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);
});

Answer 2

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

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

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

​

Answer 3

我知道这是old...but，这段代码会对某些人有所帮助。

$('#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/