鼠标悬停文本叠加层时触发Banner模糊效果的实现问题

你的问题核心是文本容器绝对定位覆盖在图片上方，导致鼠标事件全被文本容器拦截，图片根本触发不了hover。而且当前CSS的hover逻辑搞反了——应该让整个Banner区域（父容器）的hover来同时控制图片模糊和文本显示。

直接修改CSS即可，HTML无需改动：

#banner-container {
  display: block;
  position: relative;
  /* 确保父容器能完整捕获hover事件 */
  width: fit-content;
}

#banner-container img {
  width: 375px;
  margin: 24px 0;
  /* 给图片添加过渡，让模糊效果更平滑 */
  transition: filter 0.2s ease-out;
}

#text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* 移除原有margin，确保完全覆盖图片 */
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(30px);
  transition: filter 0.2s ease-out;
}

/* 关键：通过父容器hover同时控制子元素状态 */
#banner-container:hover img {
  filter: blur(3px); /* 可根据需求调整图片模糊程度 */
}

#banner-container:hover #text-container {
  filter: none;
}

改动说明： #

1. 父容器绑定hover：用#banner-container:hover触发所有状态变化，不管鼠标放在图片还是文本上，整个Banner区域都会响应
2. 修正文本容器定位：去掉margin-top和margin-left，改用width:100%和height:100%，确保完全覆盖图片，避免鼠标“漏”到图片上
3. 统一过渡效果：给图片也加上transition，让模糊/清晰的切换更流畅
4. 逻辑对齐需求：初始状态图片清晰、文本模糊；hover时图片模糊、文本清晰，完全匹配你要的交互效果

测试效果：鼠标移到Banner任意位置，图片立刻模糊，链接清晰显示；鼠标移开，图片恢复清晰，链接重新模糊隐藏。

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