Question

我使用fancybox作为我的模态窗口。我能够触发模态窗口在悬停时打开，但我还希望它在链接没有悬停时关闭窗口（失焦？）。

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

感谢任何帮助。

我添加了mouseout，我不擅长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
  });

});

如果我从一个链接直接转到另一个链接，而没有在两者之间暂停，则它不起作用

Answer 1

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

对于您的特定问题，您最好的选择是使用jQuery插件hoverIntent。如果你访问他们的网站，他们有一个很好的例子，说明处理冒泡事件的意义。

加载 hoverIntent js文件后，您可以创建两个函数来打开/关闭将由hoverIntent作为回调调用的fancybox：

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。

更新 [2015年3月]：

DEMO 使用最新版本的Fancybox（v2.1.5）和hoverIntent（v1.8.0）

Answer 2

相信你只需要这样做：

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

在悬停时打开和关闭模态窗口，在失焦时关闭

2 个答案: