Закрыть hover div только при нажатии на внешний блок

Question

У меня есть loginbox (синий), который открывается при наведении курсора на текстовый вход (желтый). Ящик остается открытым, когда вы заходите в окно регистрации, но закрывается, когда вы его оставляете (мышь в зеленой зоне).

Это ожидаемое поведение с моей текущей CSS (с использованием зависать и дисплей: нет/блок)

Я хотел бы кнопку (синий), чтобы оставаться открытым, даже при входе в зеленую зону. Но когда вы нажимаете в зеленой зоне, окно входа в систему (синий) закрывается (отображение: нет)

Возможно, это возможно только с помощью javascript/jQuery, но я понятия не имею, как это сделать. Кто-нибудь может мне с этим помочь?

Не беспокойтесь о div id и классах. Я изменю код на свои нужды.

Answer 1

Попробуйте 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(); 
}); 

Answer 2

вы можете использовать

function example(){ 

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

    divId.style.display = "block"; 

    } 

Здесь divId является синим цветом DIVID и вызвать эту функцию в onhover для зеленых дел.