在悬停时显示非嵌套 div 并在延迟后隐藏答案

【问题标题】：Show non-nested div on hover and hide after delay在悬停时显示非嵌套 div 并在延迟后隐藏
【发布时间】：2015-06-02 04:18:34
【问题描述】：

当 div #1 被鼠标悬停时，我试图显示 div #2。如果 div #2 在短时间内（比如 3 秒）没有被鼠标悬停，那么它就会隐藏。我已经让代码半工作，但它的行为确实有问题。有时它根本不隐藏，我不知道如何在它再次隐藏之前调整时间。

<div id="1">When this is moused-over</div>
<div id="2">Show this and then hide again if not moused-over within 3 secs.</div>

编辑：以防将来有人需要它。我已经修复了代码并添加了一些代码以在鼠标悬停后保持 div 保持打开状态。以前，如果您将鼠标悬停在 div #1 上，并且在导航离开时不小心将鼠标悬停在 div #2 上，则 div #2 会立即消失。

【问题讨论】：

【解决方案1】：

我认为代码很好，你只是没有使用你试图隐藏的同一个 div 类，在你的代码中我看到一个 $(menu).hide 并且没有声明菜单变量。改为：

intVal=  setTimeout(function() { $('.email-div').hide(); }, 3000);

【讨论】：

哇，我不敢相信我错过了。我已经更新了它。 jsfiddle.net/t0hj0r52/1
当用户点击它时，有什么建议让它保持不变吗？假设我有一个表格，他们正在尝试填写它，但是在他们点击输入字段后，他们的鼠标从 div 上掉了下来？
与您调用的 mouseenter 事件相同吗 clearTimeout(intVal);这样，如果我留在 div2 上，它就永远不会消失。您可以在 click 函数上调用相同的函数。如果您希望单击 div 时不再消失，您可以像这样删除 mouseleave 的事件侦听器： $('.email-div').click(function(e) { $(this).off('mouseleave') ; });