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

Question

在Espn.com上的this page，如果你转到右上角并将鼠标悬停在“myESPN”上，则会出现一个内联弹出窗口（如果可以调用它）（以这种方式它看起来连接到初始按钮）并允许用户登录该站点。

在html中，看起来有一个隐藏的div可见，当鼠标移过某个元素时会被推到前面，只要鼠标停留在调用元素上，或者新显示的元素本身。

我希望做类似的事情。但是，在用Firebug稍微探讨之后，我无法确切地知道它是如何完成的。我假设它涉及javascript，也可能是jquery - 任何人都可以帮助实现具体细节吗？

Answer 1

你需要的是一个绝对定位的div元素，你可以根据自己想要的方式定位它。然后用style =“display：none;”隐藏它，并在右侧元素的鼠标悬停上显示它。使用jQuery：

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

Javascript:
$('#elementToHover').mouseover(function() {
    clearTimeout(timeout);
    $('#layer').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();
}

或类似的......

Answer 2

以下Visual Event bookmarklet是帮助您的好工具。它允许您查看与页面上的元素关联的所有事件。

在页面上运行时，会显示叠加层，并且在包含脚本事件的元素旁边放置小图标。您可以将图标悬停以查看实际的js。请注意，如果开发人员已经足够好来缩小js，那么你看到的脚本就没有多大意义。

_{（来源：gyazo.com）}