如何突出显示CSS网格单元格？

Question

考虑一个CSS网格，其中行可以具有不同的高度：

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 8px;
}

.first {
  grid-column: 1 / 3;
  background-color: #ccc;
}

.second {
  grid-column: 5 / 6;
  grid-row: 2 / 5;
  background-color: #ccc;
  height: 120px;
}

<div class="grid">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

当在DevTools中将鼠标悬停在网格元素上时，Chrome会像这样可视化网格：

如何使用CSS（或JavaScript，如果需要）实现类似的网格覆盖效果？

Answer 1

在网格区域上使用:hover伪类。像这样的东西：

.first:hover,
.second:hover {
  background-color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 8px;
}

.first {
  grid-column: 1 / 3;
  background-color: #ccc;
}

.second {
  grid-column: 5 / 6;
  grid-row: 2 / 5;
  background-color: #ccc;
  height: 120px;
}

.first:hover,
.second:hover {
  background-color: red;
}

<div class="grid">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

Answer 2

您可以像这样使用悬停：

.first {
  grid-column: 1 / 3;
  background-color: #ccc;
}
.first:hover{
    background-color:pink;
}

.second {
  grid-column: 5 / 6;
  grid-row: 2 / 5;
  background-color: #ccc;
  height: 120px;
}
.second:hover{
    background-color:lightblue;
}