懸停時關閉模式窗口，關閉焦點時關閉

我正在使用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

懸停時關閉模式窗口，關閉焦點時關閉

回答

相關問題