将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，分别：