0

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

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

我正在寻找做类似的事情。但是，在使用 Firebug 进行了一番探索之后，我无法确定它是如何完成的。我假设它涉及 javascript，也可能涉及 jquery - 任何人都可以帮助提供有关实施的细节吗？

4

2 回答 2

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() {
    清除超时（超时）；
    $('#layer').show();
});

编辑：
隐藏它：

变量超时；
$('#elementToHover').mouseout(function() {
    timeout = setTimeout("hide()", 1000);
});
$('#layer').mouseover(function() {
    清除超时（超时）；
});
$('#layer').mouseout(function() {
    timeout = setTimeout("hide()", 1000);
});
函数隐藏（）{
    $('#layer').hide();
}

或类似的东西...

于 2009-07-27T10:02:09.923 回答
1

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

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

替代文字
（来源：gyazo.com）

于 2009-07-27T10:05:11.197 回答