HTML/CSS中表格高亮列的mix-blend-mode效果失效问题

问题场景 #

鼠标悬停表格单元格时，需要同时高亮对应行和列，且高亮色要与.filled类单元格的绿色背景通过mix-blend-mode: color产生混合效果，但目前只有行高亮能正常呈现混合色彩，列高亮没有预期的混合效果。

原代码 #

JavaScript #

const table = document.getElementById('scores-table');
const rows = table.getElementsByTagName('tr');

table.addEventListener('mouseover', function(e) {
  const target = e.target;
  if (target.tagName === 'TD') {
    const cellIndex = target.cellIndex;
    const rowIndex = target.parentElement.rowIndex;

    // 移除之前的高亮
    Array.from(rows).forEach(row => {
      Array.from(row.children).forEach(cell => {
        cell.classList.remove('highlighted-column');
      });
      row.classList.remove('highlighted-row');
    });

    // 高亮列
    Array.from(rows).forEach(row => {
      if (row.children[cellIndex]) {
        row.children[cellIndex].classList.add('highlighted-column');
      }
    });

    // 高亮行
    if (rows[rowIndex]) {
      rows[rowIndex].classList.add('highlighted-row');
    }
  }
});

table.addEventListener('mouseout', function(e) {
  const target = e.target;
  if (target.tagName === 'TD') {
    // 移除列和行的高亮
    Array.from(rows).forEach(row => {
      Array.from(row.children).forEach(cell => {
        cell.classList.remove('highlighted-column');
      });
      row.classList.remove('highlighted-row');
    });
  }
});

CSS #

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}

th,
td {
  width: 30px;
  height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  /* 边框用于可视化 */
  position: relative;
  z-index: 0;
}

.highlighted-column {
  background-color: rgba(211, 211, 211, 0.3);
  /* 列高亮浅灰色 */
  mix-blend-mode: color;
}

.highlighted-row {
  background-color: rgba(211, 211, 211, 0.3);
  /* 行高亮浅灰色 */
}

td.filled {
  background-color: green;
  mix-blend-mode: color;
  position: relative;
}

HTML #

<table id="scores-table">
  <tbody>
    <tr>
      <td class="">1</td>
      <td class="filled">2</td>
      <td class="filled">3</td>
    </tr>
    <tr>
      <td class="">4</td>
      <td class="">5</td>
      <td class="">6</td>
    </tr>
    <tr>
      <td class="filled">7</td>
      <td class="filled">8</td>
      <td class="">9</td>
    </tr>
  </tbody>
</table>

问题原因 #

行和列高亮的实现逻辑差异导致混合模式失效：

• 行高亮是给<tr>添加背景色，.filled类的<td>作为<tr>的子元素，其mix-blend-mode会作用于自身背景色与父元素<tr>的背景色，因此能正常产生混合效果。
• 列高亮是直接给<td>添加额外背景色，同一个元素的多个背景层不会触发mix-blend-mode——该属性仅作用于元素自身与父元素/外部背景的混合，而非元素内部多个背景之间的叠加，因此列高亮色只是和.filled的绿色简单叠加，没有混合效果。

解决方案 #

将列高亮的背景通过伪元素实现，让伪元素作为独立层与<td>的背景色产生混合：

修改后的CSS代码：

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}

th,
td {
  width: 30px;
  height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  position: relative;
  z-index: 0;
}

/* 用伪元素实现列高亮 */
.highlighted-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(211, 211, 211, 0.3);
  mix-blend-mode: color;
  z-index: -1; /* 确保伪元素在文字下方，不遮挡内容 */
}

.highlighted-row {
  background-color: rgba(211, 211, 211, 0.3);
}

td.filled {
  background-color: green;
  mix-blend-mode: color;
  position: relative;
}

说明 #

• 给.highlighted-column的<td>添加绝对定位的伪元素，覆盖整个单元格区域，伪元素的背景色即为列高亮色，并设置mix-blend-mode: color。
• 伪元素的z-index: -1保证它在单元格文字下方，同时作为<td>的子元素，其混合模式会作用于父元素<td>的背景色，从而实现高亮色与.filled绿色背景的混合效果。
• JavaScript和HTML代码无需修改，保持原逻辑即可。

内容的提问来源于stack exchange，提问作者Swift Ghost