图片黑色覆盖层致hover失效，如何实现hover时灰度切换且保留覆盖层？

问题根源是black_layer层级在图片上方，导致鼠标无法直接触发图片的hover事件。我们可以把hover事件绑定到父容器.box上，这样只要鼠标移到整个容器区域（包括覆盖层），就能触发图片的灰度变化，同时黑色覆盖层保持显示。

修改后的CSS代码：

.box{
  width:300px;
  height:200px;
  position: relative;
}

.image{
  width:100%;
  height:100%;
  object-fit: cover;
  filter:grayscale(1);
  /* 可选：添加过渡动画让效果更平滑 */
  transition: filter 0.3s ease;
}

/* 把hover触发条件改成父容器.box */
.box:hover .image{
  filter:grayscale(0)
}

.black_layer{
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:black;
  z-index:1;
  opacity:.3;
}

HTML代码无需修改，保持原样即可：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div class="box">
<img  src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image"  />

<div class="black_layer"></div>
   
</div>
  
</body>
</html>

原理说明：

• 父容器.box是相对定位，包含图片和覆盖层，鼠标移到容器任意位置都会触发hover
• 通过后代选择器.box:hover .image，在容器hover时修改图片的灰度滤镜
• 黑色覆盖层的z-index保持1，依然在图片上方，不会影响显示效果

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