怎么使得鼠标经过某些文字的时候显示其详细信息

RT 类似于12306上面的查询车票页面 将鼠标停留在列车名上面会自动跳出那个列车所经过地点时间等信息。鼠标移开自动消失。也就是鼠标停留的时候自动生成一个表格然后覆盖原来表格的部分界面 相当于叠加起来一样

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <style type="text/css">
    .button {
    position: relative;
    width: 100px; height: 20px;
    border: #7a340a 1px solid;
    background-color: #f7dfbb;
    }
    .menu {
    position: absolute;
    top: 21px; left: -1px;
    width: 100px; height: 120px;
    border: #ff3300 1px solid;
    background-color: #ffcc33;
    display:none;
    }
    .button:hover .menu {
    display:block;
    }
    </style>
    </head><body>
    <div class="button">
    xxxxxxxxxxxx
    <div class="menu">
    aaaaaaaaaaaa<br />
    aaaaaaaaaaaa<br />
    aaaaaaaaaaaa<br />
    aaaaaaaaaaaa<br />
    aaaaaaaaaaaa<br />
    </div>
    </div>
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    dddddddddddd<br />
    </body>
    </html>
      

  2.   

    如果文字时是放在td里的加title属性试试 
    类似
    <table>
    <tr>
    <td title="1">1</td>
    <td title="2">2</td>
    </tr>
    </table>
    如果不是  那就加个onmouseover弹div试试
      

  3.   

    用相对定位或者绝对定位都能做到，很简单的
    你网上找一个支持html内容的tooltip插件，轻松搞定
      

  4.   

    列车名元素绑定mouseover事件通过e.target || e.srcElement获取停留的那个列车的dom元素，通过这个元素的offsetLeft，offsetTop获取到这个节点的位置，然后把这个位置给隐藏的table，然后显示table
      

  5.   

    如果用hover做的话 怎么样动态添加表格啊，不想一开始就事先定义好。应该写在什么事件里
      

  6.   

    onmouseover用起来比较不方便 如果用hover的话 怎么利用hover添加元素
      

  7.   

    外层<td>添加onmouseover事件，传id值走ajax,返回数据填充<div>，<div>的display属性和坐标判断一下就可以