ToolTip 通过Js实现代替超链接中的title效果_javascript技巧-js教程-、刘德华、刘亦菲、谌洪

<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>
<script language="javascript" type="text/javascript"> 
function initEvent() { 
var links = document.getElementsByTagName("a"); 
for (var i = 0; i < links.length; i++) { 
var link = links[i]; 
link.onmouseover = linkOnMouseOver; 
link.onmouseout = linkOnMouseOut; 
} 
} 
function linkOnMouseOver() { 
var newdiv = document.createElement("div"); 
newdiv.className = "Tooltip"; 
newdiv.style.position = "absolute"; 
newdiv.style.top = window.event.clientY; 
newdiv.style.left = window.event.clientX; 
newdiv.innerHTML = "我是自定义的Tooltip，用来代替超链接中的title"; 
document.body.appendChild(newdiv); 
} 
function linkOnMouseOut() { 
var divs = document.getElementsByTagName("div"); 
for (var i = 0; i < divs.length; i++) { 
var newdiv = divs[i]; 
if (newdiv.className == "Tooltip") { 
document.body.removeChild(newdiv); 
} 
} 
} 
</script><ul>
<li><a href="#" title="百度搜索引擎" target="_blank">百度</a></li> 
<li><a href="#" title="今天你山寨了吗？" target="_blank">腾讯</a></li> 
<li><a href="#" title="新浪微博" target="_blank">新浪</a></li> 
<li><a href="#" title="搜你输入法真好用" target="_blank">搜狐</a></li> 
</ul>

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

sxdgc.cn

ToolTip 通过Js实现代替超链接中的title效果_javascript技巧-js教程-

相关推荐

互动交流中心

热门推荐

分类目录