如何将 CSS 悬停效果扩展到表格中的单元格边界之外？

将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: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

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

HTML结构

相应的HTML结构包括额外的类.row和.col用于行和列标题分别为：

示例输出

将鼠标悬停在单元格上现在会突出显示相应的行和列：

[图像突出显示行和列的表格]

这种方法可以在现代浏览器中无缝运行，并在旧版浏览器中优雅地降级。

以上是如何将 CSS 悬停效果扩展到表格中的单元格边界之外？的详细内容。更多信息请关注PHP中文网其他相关文章！