使用table滑鼠移上去改變單元格邊框顏色的方法

表格定義了border-collapse:collapse;邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

用td:hover,顯示不全

搜尋了好久，沒有找到好的方法，用左右邊框也不完美。

於是就在想，移上去的時候給加個偽元素after，絕對定位。

定義與用法

:after 偽元素在元素之後加入內容。

這個偽元素允許創作人員在元素內容的最後面插入生成內容。預設地，這個偽元素是行內元素，不過可以使用屬性 display 來改變這一點。

註解：如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支援 content 屬性。

nbsp;html><meta><title>border-hover</title><style>.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-p{position:relative;}.table tr td:hover .list-p:after{
    content: "";
    height: 100%;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 100%;
    z-index: 100;}.table tr td.list01-td:hover .list-p:after{
    border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
    border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
    border: 1px solid #ff9600;}</style>
    <p>
        </p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

周一	周二	周三	周四	周五	周六	周日
星期	星期
星期
	星期

    

顯示：

提醒：

1.開始做的時候沒做合併列的，合併行的簡單點不需要加高度。

以上是使用table滑鼠移上去改變單元格邊框顏色的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！