CSS Grid(display:grid) 鼠标悬停如何无需动态改属性高亮整行单元格

结论 #

可以实现，不需要修改单元格元素属性，也不需要引入JavaScript，仅通过纯CSS即可完成悬停高亮整行的效果。

方案1：基于:has()选择器（适配现代浏览器，通用灵活） #

你现有代码已经为单元格标注了data-row-index行号属性，直接结合属性选择器和:has()规则即可实现，不受列数变化影响：

/* 匹配所有被悬停行的单元格 */
.grid:has(.grid-cell[data-row-index="0"]:hover) .grid-cell[data-row-index="0"],
.grid:has(.grid-cell[data-row-index="1"]:hover) .grid-cell[data-row-index="1"],
.grid:has(.grid-cell[data-row-index="2"]:hover) .grid-cell[data-row-index="2"] {
  background-color: #e2f0ff; /* 可自定义高亮颜色 */
}

如果行数较多，可通过Sass等CSS预处理器循环生成对应规则，无需手动逐个枚举行号，也不需要修改原有DOM结构。

方案2：基于:nth-child选择器（兼容旧版浏览器，适配固定列数场景） #

如果需要兼容不支持:has()的旧版浏览器，结合你的网格固定2列的布局，可以按元素位置匹配同属一行的单元格：

/* 悬停行首单元格时，高亮当前单元格和右侧相邻单元格 */
.grid-cell:nth-child(2n + 1):hover,
.grid-cell:nth-child(2n + 1):hover + .grid-cell {
  background-color: #e2f0ff;
}

/* 悬停行尾单元格时，高亮当前单元格和左侧相邻单元格（`:has()`目前覆盖率已超过95%全球用户） */
.grid-cell:nth-child(2n):hover,
.grid-cell:nth-child(2n - 1):has(+ .grid-cell:hover) {
  background-color: #e2f0ff;
}

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