2022-05-30 分類: 網(wǎng)站建設(shè)
表格定義了border-collapse:collapse;邊框會合并為一個單一的邊框。
會忽略 border-spacing 和 empty-cells 屬性。
用td:hover,顯示不全
搜索了好久,沒有找到好的方法,用左右邊框也不好。
于是就在想,移上去的時候給加個偽元素after,絕對定位。
:after 偽元素在元素之后添加內(nèi)容。
這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最后面插入生成內(nèi)容。默認地,
這個偽元素是行內(nèi)元素,不過可以使用屬性 display 改變這一點。
注釋:如果已規(guī)定 !DOCTYPE,那么 Internet Explorer 8
(以及更高版本)支持 content 屬性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-hover</title> <style type="text/css"> .w1000{width:1000px;margin:0 auto;} .table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;} .table tr th{border: 1px solid #d9dbda;padding:5px 0;} .table tr td{border: 1px solid #d9dbda;} .height2{height:61px;line-height:61px;} .height1{height:30px;line-height:30px;} .table tr td:hover .list-div{position:relative;} .table tr td:hover .list-div:after{ content: ""; height: 100%; left: -1px; position: absolute; top: -1px; width: 100%; z-index: 100; } .table tr td.list01-td:hover .list-div:after{ border: 1px solid #b1bac6; } .table tr td.list02-td:hover .list-div:after{ border: 1px solid #76ca5a; } .table tr td.list03-td:hover .list-div:after{ border: 1px solid #ff9600; } </style> </head> <body> <div class="w1000"> <table class="table" cellpadding="0" cellspacing="0" > <thead> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> </thead> <tbody> <tr> <td rowspan="2" class="list01-td"><div class="list-div height2">星期</div></td> <td colspan="5" class="list02-td" ><div class="list-div height1">星期</div></td> <td></td> </tr> <tr> <td class="list02-td"><div class="list-div height1">星期</div></td> <td colspan="4"></td> <td></td> </tr> <tr> <td colspan="3"></td> <td colspan="2" class="list03-td"><div class="list-div height1">星期</div></td> <td colspan="2"></td> </tr> </tbody> </table> </div> </body> </html>本文題目:table 鼠標移上去改變單元格邊框顏色。
分享網(wǎng)址:http://m.rwnh.cn/news33/161283.html成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、小程序開發(fā)、網(wǎng)頁設(shè)計公司、微信公眾號、Google、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容