<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Resources/jquery-1.4.2.js"></script>
<title>超级链接提示</title>
<style type="text/css">
#reminder
{
position:absolute;
border:1px solid #333;
background:red;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() //文字提示
{
$(".link").mouseover(function(e)
{
var newDiv = "<div id='reminder'>"+ this.title +"<//div>";
$("body").append(newDiv);
$("#reminder")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast");
}).mouseout(function(){
$("#reminder").remove();
});
$(".picLink").mouseover(function(e) //图片提示
{
var newDiv="<div id='reminder'>"+"<img src='image/apple_1.jpg' />"+" </div>";
$("body").append(newDiv);
$("#reminder").css(
{
"top": e.pageY+ "px",
"left": e.pageX + "px"
}).show("fast");
}).mouseout(function(){
$("#reminder").remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p> <a href="#" class="link" title="文字显示提示">超级链接1</a></p>
<p><a href="#" title="自带的超级链接">自带提示的超级链接</a></p>
<p><a href="#" class="picLink">图片显示提示</a></p>
</div>
</form>
</body>
</html>
此代码中红色部分为关键, 首先了解此代码中涉及到的Jquery语法：
a.mouseover(fn)
在每一个匹配元素的mouseover时间中绑定一个处理函数,mouseover 事件会在鼠标移如对象时触发。
fn:在每一个匹配元素的mouseover 事件中绑定的处理函数
mouseout(fn):事件会在鼠标移出对象时触发
b.append(content)
向每个匹配的元素内部追加内容
c.class(property)
在每一个匹配元素上设定属性。该方法是在匹配的元素上设置大量样式属性的最佳方式。
图片提示与文字提示基本一样，所不同的是：图片提示时，在创建div元素的时候，需要<img > 标签。