2012-03-17 95 views
0

我正在做一个网站使用asp.net C#,我想弹出一个小窗口的信息,只要鼠标悬停一个特定的单词。我知道我必须使用jQuery,但我不知道如何去做。弹出鼠标悬停单词

有什么建议吗?

回答

4

有很多插件可以帮助你实现你正在寻找的东西。但是也可以自己实现这个功能。如果您遇到的某些插件也使用类似的代码,我也不会感到惊讶。

以下是我尝试揭开工具提示/弹出式插件行为的秘密。

您可以将所需的单词包装在<span>元素中,并给它一个.hover类。

<div> 
    This is some text with a <span class="hover">special</span> 
    word that has hovercraft capabilities. 
</div> 

你的jQuery(ver 1.7+)将是这个样子:

$(".hover").on('mouseenter',function(){ 
    // The popup must be shown here (mouse is over element). 
}).on('mouseleave',function(){ 
    // The popup must be hidden here (mouse has left element). 
}); 

我要补充在这里,我使用jQuery的伟大,但有时会忘记能力被称为“链接”。 on()函数实际上返回它所连接的对象。在这种情况下,$(".hover") - 所以如果我想调用该对象的另一个函数,我可以在最后添加它作为另一个函数。另外一个例子是:

$("#myElement").text("An error has occured!").css("color","#FF0000");

这行代码也将在文本#myElement也变成红色。



关于您的实际弹出 - 我建议两两件事:

  1. 有在您的标记底部的元素(最后写了这么指数最高的 - 或者手动设置最高的z-index )
  2. 您也可以在应该触发弹出窗口的元素旁边的隐藏元素中显示弹出窗口。
+0

与跨度和.hover它似乎没有它工作。 – 2012-03-17 13:39:33

+0

我的代码,因为它在这里不会给你的功能 - 你必须插入你想要使用的弹出式HTML,然后切换这些元素在这些'mouseenter/mouseleave'回调中的可见性...... – Lix 2012-03-17 13:41:44

+1

是你吗包括一个jQuery库? – Robert 2012-03-17 13:42:08