CSS / Jquery 效果 - 这是什么？答案

【问题标题】：CSS / Jquery Effect - What is this?CSS / Jquery 效果 - 这是什么？
【发布时间】：2009-07-26 15:47:37
【问题描述】：

在这个网站上：http://www.eco-environments.co.uk/ 如果你向下滚动到“我们做什么”并滚动链接你会看到一个气泡弹出显示，谁能告诉我这是如何创建的吗？

谢谢

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您可以使用像jquery tooltips 这样的jQuery 插件来实现这种效果。查看demos。

【讨论】：

【解决方案2】：

这实际上是一个非常容易创建的效果。

首先，工具提示的 HTML 中有一个隐藏的 div。

<div class="popup" style="display:none;">Hidden Content Here</div>

然后，当鼠标悬停时，可以使用 javascript 来显示隐藏的内容。例如，这是使用 jQuery 的工作方式（并以示例页面为例）。

$(".tooltip").hover(function(){
 $(this).children(".popup").fadeIn();  // Other effects can be used to show the Tooltip
},
function() {
 $(this).children(".popup").fadeOut();
});

剩下的就是使用 CSS 来确保 Tooltip 的位置正确并使它看起来不错（在大多数情况下会使用绝对定位）。有很多不同的技术可以为 Tooltips 制作漂亮的 CSS，因此一如既往地Google is your friend。

【讨论】：

【解决方案3】：

它似乎在http://docs.jquery.com/Events/hover使用普通的jQuery Hover.details

【讨论】：