鼠标悬停父元素时切换子元素样式：图片与文字模糊互转问题

你遇到的问题主要有两个：

• .imglink 设置了 z-index: -999，这个元素被压到页面最底层，鼠标根本碰不到它，hover事件自然触发不了。
• 直接给.imglink加hover滤镜会让整个容器（包括图片和文字）都被模糊，子元素的filter: none无法抵消父元素的滤镜效果，因为滤镜是容器级的，会作用于整个子树。

下面是修正后的代码，能实现你要的效果：

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
<body>
<div class="centeredimage">
       <a href="#">
            <div class="imglink">
                 <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/fennec-fox-vulpes-zerda-royalty-free-image-1600996728.jpg?crop=0.663xw:1.00xh;0.162xw,0&resize=768:*" alt="Fennec fox">
                <div class="centered"><h3 class="photolink">Image link title</h3></div>
            </div>
        </a>
    </div>
</body>
</html>

CSS代码 #

.centeredimage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px; 
}

.imglink {
  position: relative; /* 让文字的绝对定位基于这个容器 */
  cursor: pointer;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.photolink {
  font-family: 'Didact Gothic', sans-serif; 
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  color: #1e87f0;
  filter: blur(3px);
  transition: filter 0.3s ease; /* 加上过渡动画更流畅 */
}

.imglink img {
  transition: filter 0.3s ease; /* 图片也加过渡 */
}

.imglink:hover img {
  filter: blur(3px);
}

.imglink:hover .photolink {
  filter: none;
}

关键修改点说明 #

1. 移除了.imglink的z-index: -999，确保hover事件能正常触发。
2. 给.imglink加上position: relative，让内部绝对定位的文字容器能正确居中在图片上方。
3. 把滤镜效果直接作用在<img>标签上，而不是整个.imglink容器，这样hover时只有图片会模糊，文字不受父容器滤镜影响。
4. 给滤镜加上transition属性，让模糊切换有平滑的动画效果，提升交互体验。

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