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

Question

在 Espn 的此页面上。 com，如果您转到右上角并将鼠标悬停在“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

以下视觉事件书签是一个可以帮助您的好工具。 它允许您查看与页面上的元素相关的所有事件。

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

_{（来源：gyazo.com）}