鼠标悬停时显示带有文本和图形的弹出窗口

时间:2010-10-13 21:22:57

标签: javascript jquery ajax

我希望有一个弹出窗口,当用户将鼠标悬停在图像上时,它会在图像右侧显示该弹出窗口。窗口将包含文本和图形。当鼠标离开图像时,窗口应该关闭。我尝试了互联网上的各种脚本,但是它们将文本显示为同一页面的innerhtml。这打破了我的原始页面。有什么方法可以让我在翻转图像时出现带有文字和图形的框,当我关闭它时就会离开吗?

2 个答案:

答案 0 :(得分:1)

查看jQuery qtip - http://craigsworks.com/projects/qtip/

演示:http://craigsworks.com/projects/qtip/demos/


编辑:示例代码(直接来自QTip的演示网站)。这将在http://craigsworks.com/projects/qtip/demos/content/basic

上显示效果
<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});
</script>

答案 1 :(得分:0)

如果你只需捕捉mouseover和mouseleave事件,也许你应该只尝试使用CSS和:hover选择器在image或div上,如果目标浏览器允许它。