客户端控件鼠标划上显示全名

RT，但是还要注意跨浏览器问题，有些方法ff浏览器不支持。
请教大家了谢谢

解决方案 »

  1.   

    是这样的，我的aspx页面放的都是客户端控件
    <input type="text" class="type_Sel" value="<%=showSelected( dt,"dt") %>" />  
    就是这样的。但是在前台显示的时候呢，为了布局着想，会弄成这样的效果图片显示的话这是图片地址。
    我现在想做的是，鼠标划上显示全名。
      

  2.   

    这个是原效果图
    http://b28.photo.store.qq.com/http_imgload.cgi?/rurl4_b=5ccc1023fc141d91a2ff3cf846cf153cccccf6575abaa98938d661a8f1fd70b96e3888716430b540760b8a1dd4dd1b9f9d2ea55d9b2490ba3f9c9baf476b7c3b37452a7a203b01f398d1910b5098c1cb6dafe592&a=28&b=28
      

  3.   

    最简方案就是为元素增加 title 属性！L@_@K
    <html>
    <head>
    <style type="text/css">
    .singleLine {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
    float: left;
    }
    </style>
    </head>
    <body>
    <div class="singleLine" title="单行显示，0 1 2 3 4 5 6 7 8 9" >单行显示，0 1 2 3 4 5 6 7 8 9</div>
    <div class="singleLine" title="单行显示，0 1 2 3 4 5 6 7 8 9" >单行显示，0 1 2 3 4 5 6 7 8 9</div>
    <div class="singleLine" title="单行显示，0 1 2 3 4 5 6 7 8 9" >单行显示，0 1 2 3 4 5 6 7 8 9</div>
    <div class="singleLine" title="单行显示，0 1 2 3 4 5 6 7 8 9" >单行显示，0 1 2 3 4 5 6 7 8 9</div>
    </body>
    </html>
      

  4.   

    JS 实现L@_@K
    <!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>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
    <style type="text/css">
    .singleLine {
    width: 100px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    }
    #divTip{
    display: none;
    z-index: 100;
    border: solid 1px red;
    background-color: yellow;
    }
    </style>
     </head>
    <body>
    <h4>方式一</h4>
    <span title="5 单行显示，0 1 2 3 4 5 6 7 8 9">5 单行显示，0 1 2 3 4 5 6 7 8 9</span>
    <h4>方式二</h4>
    <table>
    <tr>
    <td><div class="singleLine">1 单行显示，0 1 2 3 4 5 6 7 8 9</div></td>
    <td><div class="singleLine">2 单行显示，0 1 2 3 4 5 6 7 8 9</div></td>
    <td><div class="singleLine">3 单行显示，0 1 2 3 4 5 6 7 8 9</div></td>
    <td><div class="singleLine">4 单行显示，0 1 2 3 4 5 6 7 8 9</div></td>
    </tr>
    </table>
    <div id="divTip"></div>
    </body>
    <script type="text/javascript">
    <!--
    var cDiv = document.getElementsByTagName("div");
    var target = document.getElementById("divTip");for (var i=0; i<cDiv.length; i++)
    {
    cDiv[i].onmouseover = function() {
    target.innerHTML = this.innerHTML; target.style.position = "absolute";
    target.style.top = event.clientY;
    target.style.left = event.clientX;
    target.style.display = "block";
    };
    cDiv[i].onmouseout = function() {
    target.style.display = "none";
    };
    }
    //-->
    </script>
    </html>