如何在绝对定位div覆盖的图片hover时应用mix-blend-mode:darken？

完全可以用纯CSS解决这个问题。核心是把hover触发逻辑绑定到包含图片和.overlay的父容器上，再调整overlay的样式配合混合模式，就能绕开顶层overlay的阻断问题。

具体操作：

• 给包裹图片和.overlay的父容器添加position: relative，让overlay的绝对定位有正确的基准。
• 把hover事件绑定在父容器上——哪怕overlay在最顶层，鼠标悬停时事件会冒泡到父元素，照样能触发状态变化。
• 让.overlay默认透明，hover时给它加上蓝色背景，同时设置mix-blend-mode: darken，这样overlay的蓝色就会和下方的菠萝图混合，实现变暗加蓝色叠加的效果。

示例代码：

/* 父容器 */
.image-wrap {
  position: relative;
  display: inline-block;
}

/* 菠萝图片 */
.image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* 顶层的overlay */
.image-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background 0.3s ease;
  mix-blend-mode: darken;
}

/* 父容器hover时，给overlay加上蓝色背景 */
.image-wrap:hover .overlay {
  background-color: #0066cc; /* 你需要的蓝色叠加层 */
}

如果更倾向于让图片本身应用混合模式，也可以这么调整：

.image-wrap:hover img {
  mix-blend-mode: darken;
}
.image-wrap:hover .overlay {
  background-color: #0066cc;
}

原理一致，都是靠父容器的hover触发状态变化，不管overlay在不在顶层，都能生效。

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