使用Javascript在鼠标上方的其他元素上方显示Html元素

在Espn.com上，如果您转到右上角并将鼠标悬停在“myESPN”上，则会出现一个内嵌式弹出窗口（如果可以称为该窗口的话）（其方式看起来与初始按钮相连），并允许用户登录该站点

在html中，它看起来像是有一个隐藏的div，当鼠标移动到某个元素上时，该div是可见的，并被推到前面，只要鼠标停留在调用元素上，或者新显示的元素本身，它就会一直保持在视图中

---

我希望做类似的事情。然而，在用Firebug戳了一下之后，我无法确切地确定它是如何完成的。我假设它涉及javascript，也可能涉及jquery——有人能帮助您了解实现的细节吗？

您需要的是一个绝对定位的div元素，您可以按照希望的方式定位它。然后使用style=“display:none；”将其隐藏，并在右侧元素的鼠标上方显示它。使用jQuery，这将是：

HTML:
<div id="layer" style="display: none; position: absolute; top: 10px; left:   300px;">something</div>

HTML：
某物

Javascript: $（'#elementToHover'）.mouseover（函数（）{ clearTimeout（超时）； $（“#层”）.show（）； }); 编辑：
要隐藏它，请执行以下操作：

var timeout; $('#elementToHover').mouseout(function() { timeout = setTimeout("hide()", 1000); }); $('#layer').mouseover(function() { clearTimeout(timeout); }); $('#layer').mouseout(function() { timeout = setTimeout("hide()", 1000); }); function hide() { $('#layer').hide(); } var超时； $（'#elementToHover'）.mouseout（函数（）{ timeout=setTimeout（“hide（）”，1000）； }); $（“#层”）.mouseover（函数（）{ clearTimeout（超时）； }); $（'#layer'）.mouseout（函数（）{ timeout=setTimeout（“hide（）”，1000）； }); 函数hide（）{ $（“#层”）.hide（）； }

---

或者类似的…

下面是一个帮助您的好工具。它允许您查看绑定到页面上元素的所有事件

在页面上运行时，会显示一个覆盖图，并在包含脚本事件的元素旁边放置小图标。您可以悬停图标以查看实际的js。请注意，如果开发人员已经足够好地缩小了js，那么您看到的脚本将不会有太多意义

---

（来源：）

这将显示它。但是当鼠标离开第一个元素或显示的元素时，我需要做什么才能隐藏它呢？ var timeout; $('#elementToHover').mouseout(function() { timeout = setTimeout("hide()", 1000); }); $('#layer').mouseover(function() { clearTimeout(timeout); }); $('#layer').mouseout(function() { timeout = setTimeout("hide()", 1000); }); function hide() { $('#layer').hide(); }