如何让高z-index绝对定位元素可见但不阻挡下层元素hover触发？

DevOps 小满

2026-8-27

问题原因

hover失效本质是层级事件拦截：绝对定位的.fadedblack元素z-index更高，覆盖在.fullheightcolumn上半区域，鼠标进入该区域时事件触发目标是上层遮罩，自然无法触发下层.fullheightcolumn的:hover状态。

可行方案

方案1：一行CSS修复现有结构（成本最低）

直接给.fadedblack添加pointer-events: none属性即可。
这个属性会让元素完全不响应所有鼠标交互（悬停、点击、拖拽等），鼠标事件会直接穿透该元素命中下层对应位置的元素，同时完全不影响元素本身的视觉渲染，你需要的顶部黑色渐隐效果会完整保留。
修改后的.fadedblack代码：

.fadedblack {
  height: 50vh;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
  z-index: 999;
  position: absolute;
  width:  100%;
  pointer-events: none;
}

该方案适配所有现代浏览器，适合当前遮罩层仅做视觉效果、不需要绑定任何交互的场景。

方案2：用伪元素替代独立DOM节点（结构更优）

你不需要额外添加<div class="fadedblack">的空DOM节点，可以直接用.fullheightcolumn的::before伪元素实现渐隐效果，既减少冗余DOM，配合pointer-events: none也能完全避免hover拦截问题：

/* 给父容器加相对定位，作为伪元素的定位基准 */
.fullheightcolumn {
  position: relative;
  height: 100vh;
}

/* 伪元素实现顶部渐隐遮罩 */
.fullheightcolumn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
  z-index: 1;
  pointer-events: none;
}

/* 给内部img设置低于遮罩的z-index，保证遮罩视觉效果正常 */
.fullheightcolumn img {
  position: relative;
  z-index: 0;
  /* 原本的img样式可直接保留 */
}

这种写法不需要额外维护空的遮罩节点，结构更简洁，后续调整样式也更方便。