CSS Grid中行内Div鼠标悬停背景变色的实现方法

要实现鼠标悬停时高亮整行所有Div，有两种可行方案，可根据你的需求和浏览器兼容要求选择：

方案一：调整HTML结构（兼容所有浏览器） #

先把每行的Div包裹在一个父容器里，让行结构更清晰，再通过CSS选中行容器的hover状态来控制内部Div样式：

HTML代码 #

<div class="grid-container">
  <!-- 第一行 -->
  <div class="grid-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 第二行 -->
  <div class="grid-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 第三行 -->
  <div class="grid-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

CSS代码 #

/* 外层Grid容器 */
.grid-container {
  display: grid;
  gap: 8px; /* 行与行之间的间距 */
}

/* 每行的Grid布局 */
.grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列均分宽度 */
  gap: 8px; /* 列与列之间的间距 */
}

/* 悬停行时，高亮该行所有Div */
.grid-row:hover > div {
  background-color: #e6f7ff; /* 自定义高亮背景色 */
}

/* 基础样式 */
.grid-row div {
  padding: 16px;
  border: 1px solid #ddd;
  transition: background-color 0.2s; /* 平滑过渡效果 */
}

方案二：不修改HTML（依赖现代浏览器特性） #

如果不想调整现有HTML结构，可以使用CSS :has() 伪类实现，该特性需要Chrome 105+、Firefox 121+或Edge 105+以上版本支持：

HTML代码（保持你的原结构） #

<div class="grid-container">
  <!-- row 1 -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <!-- row 2 -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <!-- row 3 -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS代码 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局，对应每行4个Div */
  gap: 8px;
}

/* 第一行：悬停该行任意Div时，选中第一行所有元素 */
.grid-container:has(div:nth-child(-n+4):hover) div:nth-child(-n+4) {
  background-color: #e6f7ff;
}

/* 第二行：悬停该行任意Div时，选中第二行所有元素 */
.grid-container:has(div:nth-child(n+5):nth-child(-n+8):hover) div:nth-child(n+5):nth-child(-n+8) {
  background-color: #e6f7ff;
}

/* 第三行：悬停该行任意Div时，选中第三行所有元素 */
.grid-container:has(div:nth-child(n+9):nth-child(-n+12):hover) div:nth-child(n+9):nth-child(-n+12) {
  background-color: #e6f7ff;
}

/* 基础样式 */
.grid-container div {
  padding: 16px;
  border: 1px solid #ddd;
  transition: background-color 0.2s;
}

若行数更多，可按规律扩展nth-child选择器范围：第N行的起始位置为4*(N-1)+1，结束位置为4*N。

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