zoukankan      html  css  js  c++  java
  • 动态随鼠标移动的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>

    效果图:

    附件下载地址:

    点此下载

  • 相关阅读:
    VS Code中Vetur与prettier、ESLint联合使用
    export 和 export default 的区别,exports 与 module.exports的区别
    css clearfix实现
    通过表单自动提交,实现页面转发
    .net webapi后台返回pdf文件流,前端ajax请求下载,空白pdf排错经历
    MS Sql Service 记一次in查询的优化
    MS SQL Service 查看执行计划
    ContOS7挂载硬盘
    centos命令行连接redis服务器
    如何造轮子
  • 原文地址:https://www.cnblogs.com/BigIdiot/p/2340458.html
Copyright © 2011-2022 走看看