动态随鼠标移动的Tip
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态随鼠标移动的Tip</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
*{font-size: 12px;}
#Tip{
display: none;
background-color: #f6f7f7;
color: #333333;
line-height: 18px;
border: 1px solid #e1e3e2;
width: 250;
height: 50;
padding: 5px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
function showTip(e){
var Tip=document.getElementById("Tip");
if(Tip==null||Tip=='undefined')
Tip=document.createElement("div");
var target=e.srcElement?e.srcElement:e.target;
Tip.innerHTML="<a href='#'style='text-decoration: none;' >"+target.innerHTML+"</a>";
Tip.setAttribute("id","Tip");
Tip.style.display="block";
Tip.style.width=100;
Tip.style.left=e.clientX+10;
Tip.style.top=e.clientY+5;
Tip.style.position="absolute";
document.body.appendChild(Tip);
}
function closeTip(){
var Tip=document.getElementById("Tip");
Tip.style.display="none";
}
</script>
<table width="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff">
<tr height="20">
<td onmousemove="showTip(event)" onmouseout="closeTip()" align="center">
<a href="#" style="text-decoration: none;">测试连接1</a>
</td>
</tr>
<tr height="20">
<td onmousemove="showTip(event)" onmouseout="closeTip()" align="center">
<a href="#" style="text-decoration: none;">测试连接2</a>
</td>
</tr>
<tr height="20">
<td onmousemove="showTip(event)" onmouseout="closeTip()" align="center">
<a href="#" style="text-decoration: none;">测试连接3</a>
</td>
</tr>
<tr height="20">
<td onmousemove="showTip(event)" onmouseout="closeTip()" align="center">
<a href="#" style="text-decoration: none;">测试连接4</a>
</td>
</tr>
<tr height="20">
<td onmousemove="showTip(event)" onmouseout="closeTip()" align="center">
<a href="#" style="text-decoration: none;">测试连接5</a>
</td>
</tr>
</table>
</body>
</html>
效果图:
附件下载地址:
