这是我的解决方案，基于兄弟组合子。
主要部分是：

.datacell:hover ~ .datarow {
    background-color: rgba(255,255,0,0.5);
}
.datacell:hover ~ .datarow + .datacell ~ .datarow{
    background-color: transparent;
}

字符串
片段：

.datatable{
    display:grid;
    grid-gap: 0;
    grid-template-columns: auto 1fr auto;
    position: relative;
}

.datarow{
    grid-column: 1 / 4;
    z-index: 0;
}

.datacell{
    z-index: 1;
    padding: 8px;
    border-bottom: 1px solid #c0c0c0;
}

.datacell:hover ~ .datarow {
    background-color: rgba(255,255,0,0.5);
}
.datacell:hover ~ .datarow + .datacell ~ .datarow{
    background-color: transparent;
}

.row-1{ grid-row: 1;}
.row-2{ grid-row: 2;}
.row-3{ grid-row: 3;}

.col-1{ grid-column: 1;}
.col-2{ grid-column: 2;}
.col-3{ grid-column: 3;}

<div class="datatable">
   <div class="datacell col-1 row-1">Row 1 Column 1</div>
   <div class="datacell col-2 row-1">Row 1 Column 2</div>
   <div class="datacell col-3 row-1">Row 1 Column 3</div>       
   <div class="datarow row-1"></div>

   <div class="datacell col-1 row-2">Row 2 Column 1</div>
   <div class="datacell col-2 row-2">Row 2 Column 2</div>
   <div class="datacell col-3 row-2">Row 2 Column 3</div>       
   <div class="datarow row-2"></div>

   <div class="datacell col-1 row-3">Row 3 Column 1</div>
   <div class="datacell col-2 row-3">Row 3 Column 2</div>
   <div class="datacell col-3 row-3">Row 3 Column 3</div>       
   <div class="datarow row-3"></div>

</div>

的数据
html的结构必须使.datarow元素关闭虚拟网格行并跨越所有前面的单元格。为了让单元格和行重叠，需要明确网格内的位置。

我最终得到了一个不同的解决方案。我的表看起来像这样：

.table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

个字符
现在你想要每行的悬停状态。添加一个元素 Package 每行会破坏父网格，因为它实际上是你试图在网格中布局的那些行 Package 器的子网格。另外，我更喜欢：

• 不使用<table>。这大约使所需的行数增加了一倍，并需要更多的样式。
• 不使用nth-child令人费解。
• 我没有尝试的一个不错的选择似乎是将每行 Package 在div中，添加类.row和display: contents，然后使用.row:hover > span作为选择器，您可以添加opacity: 0.6。

最后，我选择了以下我认为更简单的方法：

.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.row:hover {
  opacity: 0.6
}

<div class="row">
  <span>head1</span>
  <span>head2</span>
  <span>head3</span>
</div>
<div class="row">
  <span>row1 col1</span>
  <span>row1 col2</span>
  <span>row1 col3</span>
</div>
<div class="row">
  <span>row2 col1</span>
  <span>row2 col2</span>
  <span>row2 col3</span>
</div>

的字符串

现在的解决方案是子网格。它解决了主网格中的间隙问题，标记有点类似于tr和table，这意味着你有嵌套：

<div class="my-subgrid-row">
  <div class="cell-col1"></div>
  <div class="cell-col2"></div>
  ...
</div>

字符串
CSS非常简单，没有太多的技巧。

第一个月

.grid .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid gray;
}
.grid .row div {
  padding: 10px;
  display: flex;
  align-items: center;
}
.grid .row:last-child {
  border: none;
}
.grid .row:hover {
  background-color: #cccccc;
  transition: .2s all;
}

个字符

我遇到了这个问题。首先，我很好奇为什么如果你使用显示网格，为什么你不使用grid-item类？这是不必要的吗？我认为是的。无论如何，答案是，你需要给所有的div元素给予grid-item类，并将位置设置为相对。

.grid-item {
  position: relative;
}

字符串

由于您将其视为一个表，其中元素位于同一行，因此还可以将每行 Package 在DIV中，并将“display”设置为“contents”。这将形成一个用于悬停的无害父元素，然后为子元素设置样式。（不过，Edge中尚不支持display：contents。）

.table {
  display: grid;
  grid-template-columns: [col-start] auto [col-end];
  grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  grid-gap: 1px;
  overflow: hidden;
  background: gray;
}

.table .row, .table .heading{
  padding: 10px;
  position: relative;
}

.heading {
  background: navy;
  color: #fff;
  grid-row: header;
}

.row span {
  position: relative;
  z-index: 2;
}

.rowWrapper{
  display: contents;
}

.rowWrapper:hover > div{
  background-color: orange;
}

个字符

这里有一个使用伪元素的技巧。这个想法是使用元素作为背景，并使其在左侧和右侧溢出，以便它将覆盖所有行。就像这样，如果您将鼠标悬停在行内的任何元素上，您会更改颜色，就像您更改了整行的颜色一样。
这个技巧涉及到标记上的一些变化和更多的CSS。

.table {
  display: grid;
  grid-template-columns: [col-start] auto [col-end];
  grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  grid-gap: 1px;
  overflow: hidden;
  background: gray;
}

.table>* {
  padding: 10px;
  position: relative;
}

.heading {
  background: navy;
  color: #fff;
  grid-row: header;
}

.row span {
  position: relative;
  z-index: 2;
}

.row:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1000%;
  left: -1000%;
  z-index: 1;
}

.row:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 1px;
  z-index: 2;
  background-color: #fff;
}

.row:nth-child(5n+5)::after {
  bottom: -1px;
  right: 0;
  left: -1000%;
  height: 1px;
  z-index: 3;
  width: auto;
  top: auto;
  background-color: #fff;
}

.row:hover::before {
  background-color: red;
}

个字符