將CSS懸停效果擴展到單元格邊界之外：突出顯示列、列組中的表格

以表格形式顯示數據時，突出顯示懸停時的特定單元格通常是可取的。但是，突出顯示與懸停單元格相交的行和列可以進一步提高資料清晰度。當表格跨越多個測量單位時，這尤其有用。

純 CSS 解決方案

幸運的是，使用純 CSS 可以實現這種擴展的突出顯示效果。透過利用偽元素（::before、::after）、z-index 操作和絕對定位，我們可以創建超出單元格邊界的突出顯示疊加。

實作

下面的CSS程式碼說明了實作：

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML 結構

對應的HTML 結構包括行標題和列標題的附加類別.row 和.col，分別：