只有當點擊外部塊時關閉hover div

我有一個登錄框（藍色），當您將鼠標懸停在文本登錄名（黃色）上時會打開。當您進入登錄框時，該框保持打開狀態，但當您離開時它會關閉（鼠標位於綠色區域）。只有當點擊外部塊時關閉hover div

預計這與我目前的CSS（使用懸停和顯示：無/塊）行爲

我想loginbox（藍色），甚至當你進入綠色區域保持開放。但當你點擊綠色區域登錄框（藍色）關閉（顯示：無）

我想這只是可能的JavaScript/jQuery，但我不知道如何。誰能幫我這個？

不用擔心div id和classes。我會根據需要更改代碼。

enter image description here

來源

2013-04-22 AgeDeO

如果允許，並要求基於jQuery的解決方案，你會得到很多的幫助非常快。 – 2013-04-22 11:25:22

我對jQuery沒有問題 – AgeDeO 2013-04-22 11:26:05

你可以發佈你的示例代碼嗎？ – muneebShabbir 2013-04-22 11:35:40

試試這個http://jsfiddle.net/steelywing/gnyyB/

$('#main').mouseenter(function() { 
    $('#menu').show(); 
}); 

// To prevent hide #menu when click on #main 
$('#main').click(function (e) { 
    e.stopPropagation(); 
}); 

// Click outsite of #menu 
$('html').click(function() { 
    $('#menu').hide(); 
});

來源

2013-04-22 12:01:45

您可能想解釋爲什麼需要'e.stopPropagation（）'，以及爲什麼要將點擊隱藏操作附加到'html'而不是'body'。 OP不是JavaScript/jQuery專家。 – 2013-04-22 12:12:09

'e.stopPropagation（）'是爲了防止在'＃main'，'html'和'body'點擊時隱藏'＃menu'也可以工作，直到 – 2013-04-22 12:16:14

我提到'html'和'body '標籤與jsFiddle中的怪癖有關。 body元素的範圍小於根（html）的範圍，所以當綁定到html元素時演示效果更好。綁定到body元素時，您需要點擊包含內容的行來激活該操作。 – 2013-04-22 12:19:33

可以使用

function example(){ 

    var divId = document.getElementById("divId"); 

    divId.style.display = "block"; 

    }

這裏divId是藍色DIVID和調用這個函數在onhover綠色股利。

來源

2013-04-22 11:16:00 PSR

然後藍色塊保持打開狀態。我希望它在綠色區域點擊時關閉。只有在黃色框懸停後才能打開藍色框 – AgeDeO 2013-04-22 11:18:37

然後調用div中的另一個功能點擊 – PSR 2013-04-22 11:19:50

您可以讓我看看嗎？ – AgeDeO 2013-04-22 11:21:03

只有當點擊外部塊時關閉hover div

回答

相關問題