如何仅使用 CSS 突出显示悬停时的表格行和列？

使用CSS“Hover”伪类突出显示悬停时的表格行和列

在此场景中，突出显示悬停时的表格行和列可以使用像

这样的语义元素和。让我们探索一个纯 CSS 方法：

使用伪元素进行突出显示

为了突出显示行和列，我们使用 ::before 和 ::after 伪元素元素。这些创建绝对定位的虚拟元素，存在于文档流之外：

td:hover::before, /* Highlight rows on hover */
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><tr class="row">
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
</tr>

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

• 悬停的 td 或 .row 会触发整行的突出显示。
• td 或 .col悬停会触发整个列的突出显示。
• z-index：-1 将突出显示放置在表格数据单元格下方。
• 位置：绝对和极大的尺寸允许突出显示超出单元格边界。
• 溢出：隐藏在表格上隐藏任何溢出。

用于特异性的CSS类

在HTML中，我们添加像 . row 和 .col 来明确指定目标元素：

结论

此解决方案纯粹使用 CSS 突出显示悬停时的行和列，并且不依赖于JavaScript 或 jQuery。它适用于所有现代浏览器，并在旧版浏览器中正常降级。

以上是如何仅使用 CSS 突出显示悬停时的表格行和列？的详细内容。更多信息请关注PHP中文网其他相关文章！