仅在单击外部块时关闭悬停div

Question

我有一个登录框（蓝色），当您将鼠标悬停在文本登录（黄色）上时会打开。当您转到登录框时，该框保持打开状态，但当您离开时它会关闭（鼠标位于绿色区域）。

这是我当前css的预期行为（使用悬停和显示：无/阻止）

即使您进入绿色区域，我也希望登录框（蓝色）保持打开状态。但是当您点击绿色区域时，登录框（蓝色）将关闭（显示：无）

我想这只能用javascript / jQuery实现，但我不知道怎么做。任何人都可以帮我这个吗？

不要担心div id和class。我会根据需要更改代码。

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是蓝色divIde，并在onhover中为绿色div调用此函数。