鼠标弹出单词悬停

时间:2012-03-17 13:22:27

标签: c# jquery asp.net

我正在使用asp.net C#做一个网站,我想在鼠标悬停一个特定单词后立即弹出一个包含信息的小窗口。我知道我必须使用jquery,但我不知道该怎么做。

有什么建议吗?

2 个答案:

答案 0 :(得分: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. 您也可以在应该触发弹出窗口的元素旁边的隐藏元素中使用弹出窗口。

答案 1 :(得分:2)

你所听到的内容听起来像是一个“工具提示”。

使用jQuery的解决方案有点牵扯 - 所以我只是将你引导到外部资源。

可能的解决方案: