ToolTip 通过Js实现代替超链接中的title效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>自定义Tooltip特效</title> 
<style type="text/css"> 
body ul 
{ 
list-style: none; 
} 
body li 
{ 
margin: 60px; 
} 
div 
{ 
border: 1px solid #CCC; 
padding: 10px; 
background: #dff5ff; 
margin-left: 30px; 
} 
</style> 
 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20initEvent()%20%7B%20%0D%0Avar%20links%20%3D%20document.getElementsByTagName(%22a%22)%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20links.length%3B%20i%2B%2B)%20%7B%20%0D%0Avar%20link%20%3D%20links%5Bi%5D%3B%20%0D%0Alink.onmouseover%20%3D%20linkOnMouseOver%3B%20%0D%0Alink.onmouseout%20%3D%20linkOnMouseOut%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20linkOnMouseOver()%20%7B%20%0D%0Avar%20newdiv%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Anewdiv.className%20%3D%20%22Tooltip%22%3B%20%0D%0Anewdiv.style.position%20%3D%20%22absolute%22%3B%20%0D%0Anewdiv.style.top%20%3D%20window.event.clientY%3B%20%0D%0Anewdiv.style.left%20%3D%20window.event.clientX%3B%20%0D%0Anewdiv.innerHTML%20%3D%20%22%E6%88%91%E6%98%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84Tooltip%EF%BC%8C%E7%94%A8%E6%9D%A5%E4%BB%A3%E6%9B%BF%E8%B6%85%E9%93%BE%E6%8E%A5%E4%B8%AD%E7%9A%84title%22%3B%20%0D%0Adocument.body.appendChild(newdiv)%3B%20%0D%0A%7D%20%0D%0Afunction%20linkOnMouseOut()%20%7B%20%0D%0Avar%20divs%20%3D%20document.getElementsByTagName(%22div%22)%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20divs.length%3B%20i%2B%2B)%20%7B%20%0D%0Avar%20newdiv%20%3D%20divs%5Bi%5D%3B%20%0D%0Aif%20(newdiv.className%20%3D%3D%20%22Tooltip%22)%20%7B%20%0D%0Adocument.body.removeChild(newdiv)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body onload="initEvent()"> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23" title="百度搜索引擎" target="_blank">百度</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="今天你山寨了吗？" target="_blank">腾讯</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="新浪微博" target="_blank">新浪</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="搜你输入法真好用" target="_blank">搜狐</a></li> 
</ul> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程