静态随鼠标移动的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">
<!--
#Tip
{
display
: none;
background-color
: #f6f7f7;
color
: #333333;
font-size
: 12px;
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");
Tip.style.display
="block";
Tip.style.left
=e.clientX+10;
Tip.style.top
=e.clientY+5;
Tip.style.position
="absolute";
}

function closeTip(){
var Tip=document.getElementById("Tip");
Tip.style.display
="none";
}

</script>
<div id="Tip">这里显示出全部内容</div>
<table width="100%">
<tr>
<td onmousemove="showTip(event)" onmouseout="closeTip()">
<a href="#" style="text-decoration: none;">测试连接</a>
</td>
</tr>
</table>
</body>
</html>

实例效果图:

posted @ 2012-02-06 17:02  microsoft_kk  阅读(298)  评论(0编辑  收藏  举报