<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字图片提示效果</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
body{font-size: 12px;padding: 100px}
a{text-decoration: none;}
#two{width: 300px;border: 1px solid #ccc;background: #eee;line-height:30px;position: absolute;padding: 10px;display: none;}
</style>
</head>
<body>
<a href="#" class="box" title="你好." >文字提示</a>
<script>
$(function () {
var x=10;
var y=20;
$('.box').mouseover(function (e) { /*鼠标移上去*/
this.myTitle=this.title;
this.title="";
var a="<div id='two'>"+this.myTitle+"</div>"; /*显示a标签里的title字段*/
$('body').append(a); /*append()方法用来追加到页面，添加div*/
$('#two').css({
"left":(e.pageX+x)+"px" , /*鼠标移动位置横向纵向10px*/
"top":(e.pageY+y)+"px"
}).show("fast"); /*鼠标快速显示*/
}).mouseout(function () { /*鼠标移出*/
this.title=this.myTitle;
$('#two').remove();
}).mousemove(function (e) {
$('#two').css({
"left":(e.pageX+x)+"px" ,
"top":(e.pageY+y)+"px"
});
});
});
</script>
</body>
</html>效果图：
