悬停时关闭模式窗口，关闭焦点时关闭

我正在使用fancybox作为我的模态窗口。我能够触发模式窗口在悬停时打开，但我也希望当链接没有被悬停时（焦点不准），它会关闭窗口。悬停时关闭模式窗口，关闭焦点时关闭

$("a.mini-view").fancybox().hover(function() { 
    $(this).click(); 
});

任何帮助表示赞赏。

我添加了鼠标移开，我在JS不好，所以重构以下将是有益的：

$(document).ready(function() { 

    $('a.mini-view').mouseout(function() { 
    $.fancybox.close(); 
    }); 

    $("a.mini-view").fancybox().hover(function() { 
    $(this).click(); 
    }); 

    $("a.mini-view").fancybox({ 
    'overlayShow' : false, 
    'autoScale' : true 
    }); 

});

如果我直接从一个链接到另一个去，而两者之间的暂停，这不是”将不起作用

来源

2012-07-30 Brad

使用.hover()或输入/输出jQuery方法其他鼠标触发事件的主要问题是所谓的bubbling。

针对您的特定问题，您最好的选择是使用jQuery插件hoverIntent。如果你访问他们的网站，他们就处理泡沫事件的意思是一个很好的例子。

您加载的hoverIntent js文件后，就可以创建两个功能打开/关闭的fancybox将由hoverIntent被称为回调：

function openFancybox(){ 
$(this).trigger("click"); 
} 
function closeFancybox(){ 
$.fancybox.close(); 
}

....然后你hoverIntent自定义脚本：

$(".mini-view").hoverIntent({ 
sensitivity: 7, 
interval:500, 
timeout:0, 
over: openFancybox, 
out: closeFancybox 
}); // hoverIntent

（见文档，以微调您的设置）

......最后，你fancybox自定义脚本只是看起来像：

$(".mini-view").fancybox({ 
'overlayShow' : false, 
'autoScale' : true 
}); // fancybox

SEE WORKING DEMO和随意浏览源代码。

旁注：

要简化你的代码，你实际上可以在一个单一的步骤既适用的插件相同的选择：

$(".mini-view") 
.fancybox({ 
    'overlayShow' : false, 
    'autoScale' : true 
}) 
.hoverIntent({ 
    sensitivity: 7, 
    interval:500, 
    timeout:0, 
    over: openFancybox, 
    out: closeFancybox 
});

因为你使用的选项你的代码，我假设你使用的是fancybox v1.3.4。

UPDATE [2015年3月]：

DEMO使用的fancybox（v2.1.5）和hoverIntent（v1.8.0）

来源

2012-07-30 23:34:19 JFK

相信你只需要做：

$('a.mini-view').blur(function() { 
    // close the fancybox 
});

来源

2012-07-30 18:19:42

'mouseout'事件的最新版本是另一种选择。 '$ .fancybox.close（）'关闭。 – Detect 2012-07-30 18:21:42

悬停时关闭模式窗口，关闭焦点时关闭

回答

相关问题