如何修复hover时模糊图片上文字的过渡异常与模糊问题？

问题根源 #

当前代码的核心问题有两个：

• 背景图与文字嵌套在同一个<a>标签下，Hover时给<a>添加的filter: blur()会被子元素文字继承，导致文字也被模糊；
• 过渡效果的作用对象层级混乱，导致鼠标移出时过渡动画提前终止，文字瞬间变回清晰状态。

解决方案 #

通过拆分DOM结构，将背景图与文字设为同级元素，让文字脱离背景图的模糊影响范围，同时统一过渡属性的设置逻辑，确保进出动画平滑一致。

修改后的完整代码 #

HTML

<div id="link-container">
  <div class="bg-wrapper"></div>
  <a href="#" rel="noopener noreferrer">
    <div id="circle-title">TEXT</div>
  </a>
</div>

CSS

#link-container {
  position: relative;
  /* 按需设置容器尺寸，匹配背景图大小 */
  width: 300px;
  height: 300px;
}

/* 独立的背景图容器 */
#link-container .bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://i.ibb.co/Sd6kP7T/Screenshot-155.png);
  background-position: top;
  background-size: cover;
  transition: all 300ms ease-in-out;
}

#link-container a {
  position: relative;
  z-index: 1; /* 让文字层级高于背景图 */
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

#link-container #circle-title {
  margin-left: 47px;
  font-size: 21px;
  color: #dbe8d4;
  font-family: "Josefin Sans", sans-serif;
  opacity: 0;
  transition: opacity 300ms ease-in-out; /* 仅针对opacity做过渡，减少冗余 */
}

#link-container:hover .bg-wrapper {
  filter: blur(1px);
  transform: scale(1.03);
}

#link-container:hover #circle-title {
  opacity: 1;
}

关键改动说明 #

• 结构拆分：将背景图放入独立的.bg-wrapper容器，与文字<a>标签同级，彻底避免模糊效果的继承问题；
• 层级控制：给文字<a>设置position: relative和z-index: 1，确保文字始终显示在背景图上方，不受模糊影响；
• 过渡优化：给背景图容器默认设置过渡属性，Hover状态无需重复声明；文字仅针对opacity属性过渡，减少不必要的动画冲突；
• 容器定位：父容器设置position: relative，让背景图的绝对定位基于父容器，保证布局稳定性。

调整后即可实现：Hover时背景图模糊放大、文字平滑显示；鼠标移出时背景图恢复清晰、文字平滑淡出的完整效果。

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