给a标签换个漂亮的title提示框

效果如图：鼠标移动到带有title属性的<a>标签上就提示如下效果的提示框，取代默认的单调样式。

代码演示

关键JavaScript部分

<script>
titleShow()
function titleShow() {
 var oTitle=null;
 var sTitle=null;
 var aA=document.getElementsByTagName('a');
 for(var i=0;i<aA.length;i++) {
 if(aA[i].title) {
 aA[i].onmouseover=function(ev) {
 sTitle=this.title;
 this.title='';
 oTitle=document.createElement('div');
 oTitle.className='titleShow';
 oTitle.innerHTML=sTitle;
 document.body.appendChild(oTitle);
 };
 aA[i].onmousemove=function(ev) {
 var ev=ev || window.event;
 oTitle.style.left=ev.clientX+10+'px';//获取鼠标所在x座标并增加10个像素,下同
 oTitle.style.top=ev.clientY+10+'px';
 }
 aA[i].onmouseout=function() {
 this.title=sTitle;
 document.body.removeChild(oTitle);
 }
 }
 }
}
</script>

示例css

<style>
a{font:1.5em/1.5 "microsoft yahei" blod;text-decoration: none;color:red}
.titleShow{
 max-width:266px;
 position:absolute;
 font:15px/1.5 "微软雅黑" bold;
 color:#fff;
 border-radius:10px;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 -o-box-shadow:2px 1px 7px rgba(0,0,0,.3);
 -moz-box-shadow:2px 1px 7px rgba(0,0,0,.3);
 -webkit-box-shadow:2px 1px 7px rgba(0,0,0,.3);
 padding:2px 5px;
 line-height:18px;
 background:#555 url() 0 0 repeat;
 word-break:break-word;
}
</style>