首页 > 代码库 > 表格移入效果

表格移入效果

2024-08-26 14:11:42   257人阅读

表格是我们经常使用的标签，之前看到的有个很不错的小效果用css就可以实现，先放图

技术分享

其实实现起来很简单

贴代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>hover-table</title>
  6     <style>
  7          
  8          *{
  9              margin:0;
 10              padding:0;
 11              box-sizing: border-box;
 12          }
 13         body {
 14           font-family: Open Sans, sans-serif;
 15           font-size: 13px;
 16           margin: 20px;
 17           text-align: center;
 18           text-transform: uppercase;
 19           color: #000;
 20           background-color: #FFF;
 21         }
 22 
 23         h1 {
 24           font-size: 21px;
 25           margin: 1.5em 0;
 26         }
 27 
 28         table.highlight-table {
 29           overflow: hidden;
 30           width: auto;
 31           max-width: 100%;
 32           margin: 0 auto;
 33           border-collapse: collapse;
 34           border-spacing: 0;
 35         }
 36         table.highlight-table td,
 37         table.highlight-table th {
 38           padding: 10px;
 39           position: relative;
 40           outline: 0;
 41           text-align: center;
 42           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 43           vertical-align: top;
 44         }
 45         table.highlight-table th {
 46           font-weight: bold;
 47         }
 48         table.highlight-table thead th {
 49           border-bottom-width: 2px;
 50         }
 51         table.highlight-table tbody th {
 52           text-align: left;
 53           white-space: nowrap;
 54         }
 55         table.highlight-table tbody > tr:hover td,
 56         table.highlight-table tbody > tr:hover th {
 57           background: #eef;
 58         }
 59 
 60         table.highlight-table td:hover:after,
 61         table.highlight-table thead th:not(:empty):hover:after {
 62           content: ‘‘;
 63           position: absolute;
 64           z-index: -1;
 65           top: -5000px;
 66           left: 0;
 67           width: 100%;
 68           height: 10000px;
 69           background: #eef;
 70         }
 71         table.highlight-table td:hover{
 72             background: #ccc !important;
 73         }
 74         pre{
 75             width:60%;
 76             margin:0 auto;
 77             padding: 10px;
 78             background: #ccc;
 79             font-size: 20px;
 80             font-family: ‘微软雅黑‘;
 81             text-align: left;
 82             text-transform: none;
 83         }
 84     </style>
 85 </head>
 86 <body>
 87     <table  class="highlight-table">
 88         <thead>
 89             <tr>
 90                 <th>name</th>
 91                 <th>age</th>
 92                 <th>sex</th>
 93                 <th>tel</th>
 94             </tr>
 95         </thead>
 96         <tbody>
 97             <tr>
 98                 <td>tom</td>
 99                 <td>12</td>
100                 <td>boy</td>
101                 <td>111</td>
102             </tr>
103             <tr>
104                 <td>sandy</td>
105                 <td>16</td>
106                 <td>girl</td>
107                 <td>112</td>
108             </tr>
109             <tr>
110                 <td>donnad</td>
111                 <td>14</td>
112                 <td>boy</td>
113                 <td>113</td>
114             </tr>
115             <tr>
116                 <td>swif</td>
117                 <td>15</td>
118                 <td>boy</td>
119                 <td>114</td>
120             </tr>
121         </tbody>
122     </table>
123     <hr>
124     <pre>
125         table.highlight-table tbody > tr:hover td,
126         table.highlight-table tbody > tr:hover th {
127           background: #eef;
128         }
129 
130         table.highlight-table td:hover:after,
131         table.highlight-table thead th:not(:empty):hover:after {
132           content: ‘‘;
133           position: absolute;
134           z-index: -1;
135           top: -5000px;
136           left: 0;
137           width: 100%;
138           height: 10000px;
139           background: #eef;
140         }
141         table.highlight-table td:hover{
142             background: #ccc !important;
143         }
144     </pre>
145 </body>
146 </html>

主要起作用的代码是这一句

table.highlight-table td:hover:after,
table.highlight-table thead th:not(:empty):hover:after {
content: ‘‘;
position: absolute;
z-index: -1;
top: -5000px;
left: 0;
width: 100%;
height: 10000px;
background: #eef;
}

给每个单元格 行都position：relative之后使用after伪类绝对定位，高设成很大宽设为100%，层级要小于零，这样再加上背景色即实现啦。

 

表格移入效果


联系
我们