jquery選擇比顯示鼠標事件關閉div更長的div div

請問我該如何解決這個問題？我有默認情況下隱藏的窗體。它顯示在點擊事件上，我希望它隱藏在鼠標外面 - 這很容易。jquery選擇比顯示鼠標事件關閉div更長的div div

但有一個問題，我正在使用jquery選擇 - http://harvesthq.github.io/chosen/下拉菜單是這個div內，但下拉比div長。這意味着，當我選擇某個選項時，鼠標指針在鼠標事件的div外部，當我用鼠標移動時它隱藏。

有什麼建議嗎？

謝謝。

jQuery是簡單的：

$('#header_form').mouseleave(function() { 
    $('#header_form').hide(); 
});

解決方案1：的努力和編碼小時後，我發現一個簡單的解決方案：內#header_form創建具有絕對位置寬#header_form和只要下拉菜單啓動DIV在下拉菜單位置。絕對定位div不會影響#header_form的背景顏色，但它會創建不可見的「圖層」，您可以使用鼠標在#header_from「外部」移動而不關閉它。當您將鼠標移動到原始的#header_form時，您還需要刪除此修復元素，因此當您再次移出時，div會隱藏。

演示在這裏：http://jsfiddle.net/a5PuG/5/（只是改變藍色透明）它仍然需要一些調整:)

來源

2013-12-20 Leachim

這可能是與你的HTML的一個問題。你也可以發佈導航代碼嗎？ –

這裏是演示 - http://jsfiddle.net/a5PuG/2/ – Leachim

我想你可能想重新考慮你這樣做的方式。這將是非常棘手的，並需要一點麻煩的JavaScript，以按照你的意圖來實現這個工作。 –

編輯我的答案找到一個更好的辦法了。你可以很容易地做到這一點。你的代碼改成這樣：

$('select').chosen(); 
var shouldHide; 
$('#form').mouseleave(function() { 
    if (shouldHide) $(this).hide(); 
}) 
.mouseover(function() { 
    shouldHide = true;   
}); 
$('.chosen-container').mouseover(function() { 
    shouldHide = false; 
}) 
.mouseleave(function() { 
    shouldHide = false; 
});

jsFiddle

來源

2013-12-20 03:20:15

謝謝你的回覆，這很有用:)。你的代碼對我來說有一個缺陷，但這是我的錯，我沒有指定它。我的表單在懸停時顯示，我需要它隱藏在鼠標上，但是當我不首先在窗體中移動鼠標時，您的解決方案不會隱藏表單。 – Leachim

我想我不太關注你。你的表單應該開始隱形？有一個更小的按鈕？如果需要，我可以調整答案。也許更新你的jsFiddle來顯示這個功能？我很高興看到這一點，但如果這足以解決您的問題，您可以將此標記爲答案？ –

是的，你是正確的，窗體顯示按鈕的懸停效果，它在開始時是不可見的。我正在嘗試更新它，但腳本使用css z-indexes，出於某種原因它不適用於jsfiddle。在我的網站上工作良好 - http://jsfiddle.net/a5PuG/10/ – Leachim

jquery選擇比顯示鼠標事件關閉div更長的div div

回答

相關問題