今天自己写了个漂亮的title信息显示效果 鼠标经过文字链接时，弹出一个漂亮提示信息层。测试过的浏览器（ie.6-8,FF4.01,Safari 5.0.5)
本实例使用的是a里面的lang事件来作为显示源(因为考虑innerHTML可能是截取后的)。没有使用title为的是不显示title信息 ！
效果如图
事件不需要写在a的里面,页面加载的时候自动添加事件!大家可以根据自己的需要来改成自己想要的效果！显示内容不限止格式，可以换行加<br />默认是一行的。
代码如下：
<!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=gb2312" />
<meta name="Keywords" content="网页前端设计,div+css,javascript,SEO,美文欣赏,幸凡在线学习,网页设计,技术交流区,在线学习网,免费视频教程" />
<meta name="Description" content="是一个免费提供代码分享的一个网站,有最全的SEO资料,及Div+css,javascript,SEO学习网页前端设计,在线学习网,免费视频教程" />
<title>js完美的鼠标经过显title信息特效【www.86y.org幸凡在线学习网欢迎您】。</title>
<style type="text/css">
#left a{color:#0099FF;cursor:pointer;width:150px;text-decoration:none;}
#tip{display:none;position:absolute;font-size:12px;padding:5px;color:#CC3300;background:#FFFADC;border:1px solid #CC6600;}
</style>
<script type="text/javascript">
function set_tip_show(thisTag){
document.getElementById("tip").style.display = "block";
document.getElementById("tip").innerHTML=thisTag.lang;
thisTag.onmouseout = function(){
document.getElementById("tip").style.display = "none";
}
}
function set_tip_init(id)
{
if (document.getElementById("tip") == null)//判断是id为tip的对对象否存在
{
var overlay = document.createElement("div");
overlay.setAttribute("id", "tip");
document.body.appendChild(overlay);
}
var a = document.getElementById(id).getElementsByTagName("a");
for(i=0;i<a.length;i++)
{
a[i].onmouseover=function afd(){
set_tip_show(this);
}
a[i].onmousemove=function afdfd(event){
set_tip_posit(event);
}
}
}
function set_tip_posit(event){
var evt = event ? event : (window.event ? window.event : null);
var xx=evt.clientX;
var yy=evt.clientY + 20;
var obj = evt.srcElement ? evt.srcElement : evt.target;
var TIP=document.getElementById("tip");
TIP.style.left = xx + "px";
TIP.style.top = yy + "px";
}
</script>
</head>
<body>
本实例使用的是a里面的lang事件来作为显示源(因为考虑innerHTML可能是截取后的)。没有使用title为的是不显示title信息
<div align="left" id="left">
<a href="#" lang="幸凡在线学习网网页特效供站长和js爱好者参考！">站长特效一号链接</a>
<div></div>
<a href="#" class="zzjs_net" lang="打造国内最多的网页特效站！">站长特效二号链接</a>
</div>
<script type="text/javascript">
set_tip_init("left");
</script>
</body>
</html>
(完)
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)