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

Posted 2023-03-05

【中文标题】如何在 CSS Grid 中突出显示行中的所有单元格（显示：网格）

【英文标题】：How to highlight all cells in row on mouse over in CSS Grid (display: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>

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

【问题讨论】：

相关：***.com/a/48109479/8620333

@TemaniAfif：伪元素的有趣技巧，但它破坏了我需要的水平滚动

这能回答你的问题吗？ How to make hover state on row table with CSS grid layout

不完全。接受的解决方案不适用于滚动条。我不能将.row-wrapper 与display: contents 一起使用，因为它不受官方支持并且会破坏其他一些东西。

为什么不用表格来代替？

【参考方案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 表格。