如何在 CSS Grid 中突出显示行中的所有单元格（显示：网格）答案

【问题标题】：How to highlight all cells in row on mouse over in CSS Grid (display:grid)如何在 CSS Grid 中突出显示行中的所有单元格（显示：网格）
【发布时间】：2021-12-28 07:45:15
【问题描述】：

我有一个 CSS 网格：

.grid {
    display: grid;
    grid-template-columns: 10em 10em;
    grid-template-columns: 10em 10em;
    overflow: auto;
    width: 19em;
    height: 8em;
}
.grid-cell {
   border: solid 1px;
   height: 3em;
}

<div class="grid">
  <div class="grid-cell" data-row-index="0">A1</div>
  <div class="grid-cell" data-row-index="0">A2</div>

  <div class="grid-cell" data-row-index="1">B1</div>
  <div class="grid-cell" data-row-index="1">B2</div>

  <div class="grid-cell" data-row-index="2">C1</div>
  <div class="grid-cell" data-row-index="2">C2</div>
</div>

是否可以在不动态修改单元格元素属性的情况下突出显示悬停行的所有单元格？

【问题讨论】：

相关：stackoverflow.com/a/48109479/8620333
@TemaniAfif：伪元素的有趣技巧，但它破坏了我需要的水平滚动
这能回答你的问题吗？ How to make hover state on row table with CSS grid layout
不完全。接受的解决方案不适用于滚动条。我不能将.row-wrapper 与display: contents 一起使用，因为它不受官方支持并且会破坏其他一些东西。
为什么不用表格来代替？

标签： javascript html css css-selectors css-grid

【解决方案1】：

这是一个使用表格而不是网格的解决方案。

.grid {
  width: 19em;
  height: 8em;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 20em;
}
tr:hover {
  background-color: yellow;
}
td {
  border: solid 1px;
  height: 3em;
}

<div class="grid">
  <table>
    <tr>
      <td>A1</td>
      <td>A2</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
    </tr>
  </table>
<div>

【讨论】：

谢谢，但问题是如何突出显示 CSS 网格中的行，而不是 html 表格。