静态随鼠标移动的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)  编辑  收藏  举报