只有当点击外部块时关闭hover div

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

预计这与我目前的CSS（使用悬停和显示：无/块）行为

我想loginbox（蓝色），甚至当你进入绿色区域保持开放。但当你点击绿色区域登录框（蓝色）关闭（显示：无）

我想这只是可能的JavaScript/jQuery，但我不知道如何。谁能帮我这个？

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

enter image description here

来源

2013-04-22 AgeDeO

如果允许，并要求基于jQuery的解决方案，你会得到很多的帮助非常快。 – 2013-04-22 11:25:22

我对jQuery没有问题 – AgeDeO 2013-04-22 11:26:05

你可以发布你的示例代码吗？ – muneebShabbir 2013-04-22 11:35:40

试试这个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(); 
});

来源

2013-04-22 12:01:45

您可能想解释为什么需要'e.stopPropagation（）'，以及为什么要将点击隐藏操作附加到'html'而不是'body'。 OP不是JavaScript/jQuery专家。 – 2013-04-22 12:12:09

'e.stopPropagation（）'是为了防止在'＃main'，'html'和'body'点击时隐藏'＃menu'也可以工作，直到 – 2013-04-22 12:16:14

我提到'html'和'body '标签与jsFiddle中的怪癖有关。 body元素的范围小于根（html）的范围，所以当绑定到html元素时演示效果更好。绑定到body元素时，您需要点击包含内容的行来激活该操作。 – 2013-04-22 12:19:33

可以使用

function example(){ 

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

    divId.style.display = "block"; 

    }

这里divId是蓝色DIVID和调用这个函数在onhover绿色股利。

来源

2013-04-22 11:16:00 PSR

然后蓝色块保持打开状态。我希望它在绿色区域点击时关闭。只有在黄色框悬停后才能打开蓝色框 – AgeDeO 2013-04-22 11:18:37

然后调用div中的另一个功能点击 – PSR 2013-04-22 11:19:50

您可以让我看看吗？ – AgeDeO 2013-04-22 11:21:03

只有当点击外部块时关闭hover div

回答

相关问题