//在新闻类的网站上经常见到这种超链接提示，默认效果很差劲，又慢又单调，在一些网页布局很紧张的网页上（一如北京的房子）还经常出现超出长度用"..."来代替的用法
//这里用jquery写一个超链接提示，给爱美的学弟学妹，祝大家学习愉快，欢迎兄弟姐妹们拍砖指正
1.实现后的效果如下：

2.设计思想：
//1.获取a元素,当鼠标移动到元素上时提取元素的title内容,并将其默认值清空,为祖元素li添加一个类以提示选中
//2.创建一个div元素,内容是原来title的内容,并将元素添加到当前页面(注意定位问题)
//3.当鼠标离开a元素时要清除创建的元素,删除li的classname为h的类,把默认title还原
//4.当鼠标移动时让提示跟随
//说明:
// jquery已经解决事件的兼容性问题
// 创建的div元素要有absolute定位
3.具体的jquery代码：

<script type='text/javascript'>
 $(function(){ 
 //====================以下这部分是给列表添加序号==================================
 var s = $(".s"); //获取序号标签的对象
 //循环将class 为s 的元素的文本修改成对应的序号
 //可以有多种方式,这里用最容易理解的一种
 for(var i=1;i<=s.length;i++){
 s.eq(i-1).text(i);
 }
 //下边是给前三个序号不同的背景
 s.eq(0).css("background","blue"); //第一个
 s.eq(1).css("background","purple"); //第二个
 s.eq(2).css("background","yellow"); //第三个
 //=====================以下部分是给A标签添加提示代码===============================
 // 设计思路
 //1.获取a元素,当鼠标移动到元素上时提取元素的title内容,并将其默认值清空,为祖元素li添加一个类以提示选中
 //2.创建一个div元素,内容是原来title的内容,并将元素添加到当前页面(注意定位问题)
 //3.当鼠标离开a元素时要清除创建的元素,删除li的classname为h的类,把默认title还原
 //4.当鼠标移动时让提示跟随
 //说明:
 // jquery已经解决事件的兼容性问题
 // 创建的div元素要有absolute定位
 $("a").mouseover(function(e){
 //获取当前元素的祖父元素中的li元素,并为其添加一个h类
 $(this).parents("li").addClass("h");
 //把默认的title赋值给this.t
 this.t = this.title; 
 //清空title,解决a的title的默认事件
 this.title = "";
 //创建提示内容的元素,并将其追加到当前页面
 $("<divid='ti'>"+this.t+"</div>").appendTo("body");
 //为ti添加样式
 //e.pageX 获取鼠标当前相对于窗口的x坐标
 //e.pageY 获取鼠标当前相对于窗口的y坐标
 //absolute 相当body绝对定位,不影响标准文档流
 $("#ti").css({
 "top":(e.pageY+20)+"px",
 "left":(e.pageX+10)+"px",
 "color":"green",
 "position":"absolute"
 }).show("fast"); 
 }).mouseout(function(){
 //删除li的h类
 $(this).parents("li").removeClass("h");
 //还原title的默认值
 this.title = this.t;
 //删除提示
 $("#ti").remove(); }).mousemove(function(e){
 //实时的获取鼠标的位置坐标,让ti跟随鼠标移动
 $("#ti").css({
 "top":(e.pageY+20)+"px",
 "left":(e.pageX+10)+"px"
 });
 });
 });
</script>


4.HTML 和 CSS部分的代码： 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接提示！</title>
<script src='jquery.js'></script>
<style>
.box {
 width:500px;
 height:300px;
 line-height:30px;
 background:#eee;
 padding:20px 0 0 15px;
}
.box ul {
 margin:0;
 padding:0;
 list-style:none;
}
.box ul li {
 display:block;
 width:400px;
 height:26px;
 line-height:26px;
 list-style-type:none;
 border-bottom:1px dashed #000;
}
.box ul li.h {
 background:pink;
}
.box a:link , .box a:visited {
 font-size:12px;
 text-decoration:none;
 display:block;
 width:300px;
 height:26px;
 line-height:26px;
 color:#666;
 float:left;
 white-space:nowrap;
 text-overflow:ellipsis;
 overflow:hidden;
}
.box .s {
 width:15px;
 height:15px;
 background:#ccc;
 line-height:15px;
 display:block;
 float:left;
 text-align:center;
 margin:5px 10px 0 2px;
}
</style>
</head>
<body>
<div class="box">
 <ul>
 <li><div class="s">1</div><a href="#" title="用jquery实现超链接提示--写给爱美的猿弟，猿妹.111">用jquery实现超链接提示--写给爱美的猿弟，猿妹< /a></li>
 <li><div class="s">1</div><a href="#" title="我们都是好孩子，好好学习天天向上！我们都是好孩子，好好学习天天向上！.222">我们都是好孩子，好好学习天天向上！我们都是好孩子，好好学习天天向上！</li>
 <li><div class="s">1</div><a href="#" title="如果有图片可以实现更漂亮的效果.333">我们都是好孩子，好好学习天天向上！如果有图片可以实现更漂亮的效果</a& gt;</li>
 <li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.444">我们都是好孩子，好好学习天天向上！</li>
 <li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.555">我们都是好孩子，好好学习天天向上！</li>
 <li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.666">我们都是好孩子，好好学习天天向上！</li>
 </ul>
</div> 
</body>
</html>0@sina.com

6.  //完毕,祝大家学习愉快