鼠标放上去显示全部文字,不放上去,显示部分文字jquery效果,包括隐藏部分文字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquerys/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquerys/jquery-1.4.4.js"></script>
<script type="text/javascript" >

$('div.divmatnrdesc').live('mouseover', function(e) {
   text=$(this).text();
   tooltip = "<div id='tooltipdiv'><font style='font-size:26px'> "+text+"</font></div>"; 
      $("body").append(tooltip); 
      $("#tooltipdiv").show();
   $("#tooltipdiv")
   .css({
   "top": (e.pageY+10) + "px",
   "left":  (e.pageX +10) + "px"
  }).show("fast");   
 });
 
 $('div.divmatnrdesc').live('mouseout', function(e) {
  $("#tooltipdiv").remove();
 });
 
 
 $('div.divmatnrdesc').live('mousemove', function(e) {
  $("#tooltipdiv")
  .css({
   "top": (e.pageY+10 ) + "px",
   "left":  (e.pageX+10)  + "px"
  }).show();   
 });

</script>
<style type="text/css">
 #bg .name{
 color:#00CCCC;
 text-align:center;
 
}
.divmatnrdesc{
   width:100px;overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

 

 </style>
    <title>My JSP 'view.jsp' starting page</title>
  </head>
 
  <body>
    <table id="bg" width="400px" border="1" style="table-layout:fixed;">
  <tr>
    <td class="name" width="100px">户名</td>
    <td class="name" width="100px">内容</td>
    <td class="name" width="100px">时间</td>
    <td class="name" width="100px">时间</td>
  </tr>
  <tr>
    <td class="name" width="50px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">admin</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">123</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">2012</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">20124</td>
  </tr>
  <tr>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">admin</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">233ssssssssssssssssssssssssss33fffffff</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">2013</td>
    <td width="100px" style="overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;">201sssss3</td>
  </tr>
</table>
<div class='divmatnrdesc'>texxxxxxxxx你好,有你就好!有你真好</div>
  </body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值