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

Question

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

这是我当前 CSS 的预期行为(使用悬停和显示:无/ block )

即使您进入绿色区域，我也希望登录框(蓝色)保持打开状态。但是，当您单击绿色区域时，登录框(蓝色)会关闭(显示:无)

我想这只能通过 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();
});