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

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 方法触发事件的主要问题称为冒泡。

对于您的特定问题，最好的选择是使用 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。

---

更新 [2015 年 3 月]:

<强> DEMO 使用最新版本的Fancybox (v2.1.5)和hoverIntent (v1.8.0)