在css中无法直接通过 ::before 伪元素实现真正的跨行悬浮高亮，因为伪元素属于独立于表格结构的内联或块级框，无法跨越 <tr> 边界。要实现该效果，必须使用 <code>position: absolute 配合 z-index 和 javascript 动态计算位置，或者利用 css grid/flexbox 重构布局以规避表格语义限制。
为什么伪元素无法跨行高亮
::before 伪元素是父元素的子节点，其渲染范围严格受限于父元素的盒模型。在标准 HTML 表格中，<td> 是 <code><tr> 的子元素，而 <code><tr> 又是 <code><tbody> 的子元素。当鼠标悬停在某个单元格上时，伪元素只能在该单元格的边界内扩展，无法“穿透”到相邻的行。即使设置极大的 <code>height，它也无法覆盖其他行的内容，因为其他行在 DOM 树中是兄弟节点而非子节点，且表格布局引擎会强制处理重叠区域的层叠上下文。
<table class="cross-highlight">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-row="1">
<td>101</td>
<td>Alice</td>
</tr>
<tr data-row="2">
<td>102</td>
<td>Bob</td>
</tr>
</tbody>
</table>上述 HTML 结构中，若尝试对 <td> 使用 <code>::before 来高亮整行，会发现伪元素仅出现在单元格内部。例如，给 .cell::before 设置 top: -50px; height: 100px;，视觉上它会向上延伸，但会被上一行的 <td> 遮挡，或者因表格的 <code>border-collapse 属性导致显示异常。这证明了纯 CSS 伪元素方案在表格跨行场景下的局限性。
立即学习“前端免费学习笔记（深入）”；
使用绝对定位与 JavaScript 实现跨行高亮
可行的替代方案是在表格容器内创建一个透明的覆盖层（Overlay），并通过 JavaScript 监听鼠标事件，动态调整该覆盖层的 top、left、width 和 height，使其精确匹配当前悬停的单元格及其所在行的视觉区域。这种方法绕过了表格的布局限制，因为覆盖层是一个独立的 DOM 元素，可以随意定位。
const table = document.querySelector('.cross-highlight');
const overlay = document.createElement('div');
overlay.className = 'highlight-overlay';
table.appendChild(overlay);
table.addEventListener('mouseover', (e) => {
const cell = e.target.closest('td');
if (!cell) return;
const rect = cell.getBoundingClientRect();
const tableRect = table.getBoundingClientRect();
overlay.style.position = 'absolute';
overlay.style.top = (rect.top - tableRect.top) + 'px';
overlay.style.left = (rect.left - tableRect.left) + 'px';
overlay.style.width = rect.width + 'px';
overlay.style.height = rect.height + 'px';
overlay.style.pointerEvents = 'none';
overlay.style.zIndex = '10';
overlay.style.backgroundColor = 'rgba(0, 128, 255, 0.2)';
});
table.addEventListener('mouseout', () => {
overlay.style.opacity = '0';
});
table.addEventListener('mouseenter', () => {
overlay.style.opacity = '1';
});运行此代码后，当鼠标悬停在任意单元格时，.highlight-overlay 会立即移动到该单元格的位置并覆盖其背景。由于使用了 pointer-events: none，鼠标事件仍能穿透覆盖层传递到下方的单元格，确保交互流畅。此方法的关键在于实时计算相对坐标，以适应表格滚动或窗口大小变化。
基于具体输入条件的高亮行为验证
在上述实现中，若表格启用了 border-collapse: collapse，单元格的边框会合并，此时 getBoundingClientRect() 返回的尺寸可能不包含边框宽度，导致高亮区域略小于视觉上的单元格。为解决此问题，需在计算高度时额外加上边框宽度，或使用 offsetWidth 和 offsetHeight 获取包含边框的实际尺寸。此外，若单元格内包含浮动元素或绝对定位子元素，需确保这些子元素不会干扰 getBoundingClientRect() 的计算结果，通常保持单元格内容为静态流式布局即可保证准确性。
