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

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

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

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

我想这只能通过javascript/jQuery实现，但我不知道如何实现。有人能帮我吗

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

您可以使用

   function example(){  

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

   divId.style.display = "block";

  }

这里的

divId

是蓝色的divId，在

onhover

中为绿色div调用此函数。

试试这个

---

然后蓝色块保持打开状态。我想它被关闭时，在绿色区域点击。蓝色框也只能在黄色框悬停时打开然后在div click中调用另一个函数如果您允许并请求基于jQuery的解决方案，您将很快得到很多帮助。我对jQuery没有问题。您可以发布示例代码吗？这看起来像是

为我做这件事
question@WingLeong可能是这样,，但他努力提出了一个明确而具体的问题，涉及到一个常见的设计特性。值得回答。您可能需要解释为什么需要
e.stopPropagation（）
，以及为什么将单击隐藏操作附加到
html
而不是
正文
。OP不是JavaScript/jQuery专家。
e.stopPropagation（）
是为了防止在单击
#main
时隐藏
#菜单
，
html
和
body
也应该起作用，因为我提到的
html
和
body
标记与JSFIDLE中的一个怪癖有关。body元素的范围小于root元素（html），因此绑定到html元素时演示效果更好。绑定到body元素时，需要单击包含内容的行来激活操作。哦，奇怪，我不知道为什么jQuery的O3O+1工作得很好。请根据评论更新您的答案，这将使其更加方便用户。祝你一切顺利。
$('#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();
});