<!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><title>demo</title>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title="";
var tooltip = "<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast"); //设置x 坐标和y 坐标，并且显示
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
