鼠标悬停的迷你屏幕弹出窗口

时间:2009-06-15 04:33:42

标签: javascript html css mouseover onmouseover

我无法弄清楚如何用诚实的语言来表达这个问题。 :/

但我正试图获得以下效果:

http://zack.scudstorm.com/example.png

我想知道这里是否有人可以帮我试图弄清楚如何在图像中看到这种效果? :/

如图所示,效果是当我将鼠标悬停在图像上,或者我将“onmouseover”事件绑定到的任何内容时,会显示“弹出窗口”,显示我可能需要显示的文本和其他信息。 / p>

提前致谢!
-Zack

P.S。 对不起来自WoW的例子;这是我在试图描述这种效果时唯一能想到的。

3 个答案:

答案 0 :(得分:1)

查看任何一个jQuery工具提示插件。

qTip似乎相当不错。

答案 1 :(得分:0)

下载了一些伪代码,以帮助您入门:

将鼠标悬停事件绑定到链接 - 在jquery中:$('a.popup').mouseover(function(){ /* code here */ });

在事件中找到鼠标的位置
创建(或使用已创建的)div来保存您的信息 将div直接放入body元素中,这样你就可以绝对定位它 使用您之前找到的鼠标位置将div放置在鼠标(或相对于鼠标)

将鼠标输出事件绑定到链接
在事件中隐藏绝对定位的信息div

在样式表中应用漂亮的样式:)

这就是它的全部内容。它并不困难 - 如果你使用jquery所有这些东西都在文档中。

希望这有帮助

答案 2 :(得分:0)

MooTools也有一些不错的鼠标提示:

MooTools docs: Tips Class

Demo/Tutorial