CSS z-index堆叠图片hover时单独实现模糊效果求助

这个问题的核心原因很直白：z-index更高的图片完全覆盖在下层图片之上，导致下层图片根本接收不到鼠标的hover事件——鼠标看起来是放在下层图片上，但实际上一直停在最上层的元素上，自然触发不了下层的模糊效果。

下面给你两种实用的解决方案：

方案1：利用pointer-events让鼠标穿透上层元素 #

这种方法不需要修改HTML结构，只调整CSS即可：

/* 统一设置所有图片的基础定位 */
img {
  position: absolute;
}

.leaves { z-index: 1; }
.flower { z-index: 999; }
.bird { z-index: 1000; }

/* 默认让上层图片不拦截鼠标事件，允许鼠标穿透到下层 */
.flower, .bird {
  pointer-events: none;
}

/* 当hover任意图片时，触发模糊并恢复鼠标事件（避免hover时被穿透） */
img:hover {
  -webkit-filter: blur(4px);
  filter: blur(4px);
  pointer-events: auto;
}

原理说明： #

• pointer-events: none会让元素忽略所有鼠标事件，鼠标可以直接"穿过"它触碰到下层元素。
• 当hover到某张图片时，我们把它的pointer-events设回auto，这样它就能保持hover状态，不会被下层元素抢事件。

方案2：用容器包裹图片，统一接收hover事件 #

如果担心pointer-events的兼容性（虽然现代浏览器都支持），可以给每张图片加一个容器，让容器负责接收hover事件：

修改后的HTML： #

<div class="img-wrap leaves-wrap">
  <img class="leaves" src="leaves_01.png"/>
</div>
<div class="img-wrap flower-wrap">
  <img class="flower" src="purple_orchid02.png"/>
</div>
<div class="img-wrap bird-wrap">
  <img class="bird" src="bird_01.png"/>
</div>

对应的CSS： #

/* 容器设置为绝对定位，尺寸和图片一致，全部放在最上层接收鼠标事件 */
.img-wrap {
  position: absolute;
  width: 200px; /* 替换成你的图片实际宽度 */
  height: 200px; /* 替换成你的图片实际高度 */
  z-index: 1001;
}

/* 图片的定位和层级保持不变 */
img {
  position: absolute;
}
.leaves { z-index: 1; }
.flower { z-index: 999; }
.bird { z-index: 1000; }

/* hover容器时，让对应的图片模糊 */
.leaves-wrap:hover .leaves,
.flower-wrap:hover .flower,
.bird-wrap:hover .bird {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

原理说明： #

所有容器都在最上层，不管图片的层级如何，鼠标hover容器时，就能通过后代选择器控制对应图片的模糊效果，完美避开层级覆盖的问题。

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