如何通过将鼠标悬停在其中一列的跨度上来照亮整个单行？

<div class="grid-container">
  <div class="grid-item">列1</div>
  <div class="grid-item">列2</div>
  <div class="grid-item">列3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列相同宽度 */
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}

.grid-item:hover {
  grid-column-start: 1; /* 跨度起始列为第一列 */
  grid-column-end: 4; /* 跨度结束列为第三列的下一列 */
  background-color: yellow; /* 设置背景色为黄色 */
}