javascript - 仅当在块外单击时才关闭悬停 div

Question

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

这是我当前 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为绿色 div 调用此函数。