css特效实现html表格显示部分内容，当鼠标移上去显示全部。

2年前 (2022) 程序员胖胖胖虎阿

215 0 0

代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <style>
 6 .newsInfo:hover {
 7     background: #eee;
 8     color: #333;
 9     z-index: 999;
10 }
11 .newsInfo {
12 
13     position: relative;
14     z-index: 0;
15 }  
16 .newsInfo span {
17     
18     display: none;
19 } 
20 .newsInfo:hover span {
21     display: block;
22     position: absolute;
23     min-width:400px;
24     top: 28px;
25     left:100px;
26     border: 1px solid #cccccc;
27     background: #C1CDC1;
28     color: black;
29     padding: 5px;
30     text-align: left;
31     overflow: hidden;
32 }
33 .newInfoTruncation {
34     width:120px;
35     white-space:nowrap; 
36     word-break:keep-all; 
37     overflow:hidden; 
38     text-overflow:ellipsis;
39 }  
40 </style>
41 <title>纯css实现鼠标置上展开显示全部内容</title>
42 </head>
43  
44  
45 <body>
46  <div>
47 <table>
48 <tr>
49 <td>我是第一列</td>
50 <td>
51 <a href="#"class="newsInfo" style='text-decoration:none'>
52             <div class="newInfoTruncation">
53                 我是div里的参考消息网2月29日
54             </div>
55             <span>
56                 我是span里的参考消息网2月29日报道 韩媒称，中国正在迅速增强国防实力。去年年底和今年年初，中国先后采取了各种史无前例的强化军事力量的措施。有预测称，连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。
57             </span>
58   </a>
59 </td>
60 </tr>
61 </table>
62 </div>
65 </body>
66 </html>