CSS Grid重叠元素（含空白单元格）的mouseover事件触发异常问题

嘿，我完全懂你碰到的这个困扰！本来以为只是简单的重叠布局，结果发现下层Grid的鼠标事件被上层“挡住”了，哪怕上层是空单元格也没法触发下层的事件对吧？咱们来搞定它～

问题根源 #

默认情况下，上层的Grid容器作为块级元素，会占据它所在的整个空间，哪怕里面的单元格是空的，它也会捕获所有落在这个区域的鼠标事件，根本不会传到下层的Grid上。这就是为什么你把光标放在红色方块上没反应，只有最上层元素能响应的原因。

解决方案：用pointer-events控制事件穿透 #

咱们可以利用CSS的pointer-events属性来精准控制哪些元素响应鼠标事件：

• 给上层的Grid容器设置pointer-events: none，这样它本身不会捕获任何鼠标事件，鼠标事件会直接穿透到下层元素；
• 然后给上层Grid里的非空白单元格单独设置pointer-events: auto，让这些单元格正常响应鼠标事件。

代码示例 #

<!-- HTML结构 -->
<div class="grid-container grid-top">
  <div class="cell">上层单元格1</div>
  <!-- 空单元格 -->
  <div class="cell">上层单元格3</div>
</div>

<div class="grid-container grid-bottom">
  <!-- 空单元格 -->
  <div class="cell red-cell">下层红色单元格</div>
  <div class="cell">下层单元格3</div>
</div>

/* CSS样式 */
.grid-container {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  width: 300px;
}

.grid-top {
  pointer-events: none; /* 容器本身不捕获鼠标事件 */
  z-index: 1;
}

.grid-top .cell {
  pointer-events: auto; /* 非空白单元格恢复事件响应 */
  background: #eee;
  padding: 20px;
  border: 1px solid #ccc;
}

.grid-bottom {
  z-index: 0;
}

.grid-bottom .cell {
  background: #ddd;
  padding: 20px;
  border: 1px solid #bbb;
}

.red-cell {
  background: #ff4444 !important;
  color: white;
}

// JS事件演示
document.querySelectorAll('.cell').forEach(cell => {
  cell.addEventListener('mouseover', () => {
    console.log(`触发mouseover: ${cell.textContent}`);
  });
});

效果验证 #

这样设置之后：

• 上层的非空白单元格（比如“上层单元格1”“上层单元格3”）会正常触发mouseover事件；
• 上层的空白单元格区域，鼠标事件会穿透到下层，比如你把光标放在红色方块上，就能触发它的mouseover事件啦～

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