实现两张重叠图片的同步CSS悬停效果

我尝试仅用CSS实现悬停效果，必要时也可使用JavaScript。已完成HTML布局并实现单张图片的悬停状态，但无法让两张图片同时产生相反的悬停效果。参考原型为Figma交互原型。以下是我尝试的代码，仅能实现单图悬停，需实现两图同步变化：

#wrap img {
    -webkit-transition: 400ms ease 100ms;
    -moz-transition: 400ms ease 100ms;
    transition: 400ms ease 100ms;
}
    
img.hvrimg1 {
    position:relative;
    bottom:180px;  
    left: 260px;
    z-index: 1;
 
}

img.hvrimg1:hover {
    position:relative;
    filter: blur(3px);
    -moz-transform: translate(-10px, -0px);
    -ms-transform: translate(-10px, -0px);
    -o-transform: translate(-10px, -0px);
    -webkit-transform: translate(-10px, -0px);
    transform: translate(-10px, -0px)

}
    
img.hvrimg2 {
    position:relative;
    filter: blur(3px);


}

img.hvrimg2:hover {
    position:relative;
    filter: blur(0px);
        -moz-transform: translate(10px, -0px);
    -ms-transform: translate(10px, -0px);
    -o-transform: translate(10px, -0px);
    -webkit-transform: translate(-10px, -0px);
    transform: translate(10px, -0px)

}

要实现两张图片同步触发相反悬停效果，核心是监听父容器#wrap的hover状态，而非单个图片的hover。这样鼠标进入容器范围时，两张图片会同时变化，纯CSS即可实现：

#wrap {
  /* 必须设置父容器宽高，确保覆盖两张图片的全部区域，否则hover触发范围会异常 */
  position: relative;
  width: 600px; /* 根据你的实际图片尺寸调整 */
  height: 400px; /* 根据你的实际图片尺寸调整 */
}

#wrap img {
  -webkit-transition: 400ms ease 100ms;
  -moz-transition: 400ms ease 100ms;
  transition: 400ms ease 100ms;
}
    
img.hvrimg1 {
  position: relative;
  bottom: 180px;  
  left: 260px;
  z-index: 1;
  filter: blur(0); /* 初始状态无模糊 */
}

img.hvrimg2 {
  position: relative;
  filter: blur(3px); /* 初始状态模糊 */
}

/* 父容器hover时同步修改两张图片的状态 */
#wrap:hover .hvrimg1 {
  filter: blur(3px);
  transform: translate(-10px, 0);
}

#wrap:hover .hvrimg2 {
  filter: blur(0);
  transform: translate(10px, 0);
}

关键调整说明 #

1. 移除单个图片的:hover规则：改为监听父容器的hover，确保鼠标在任意一张图片上时，两张图同步变化
2. 明确初始状态：补全hvrimg1的默认模糊状态，确保初始显示符合需求
3. 设置父容器尺寸：如果父容器没有明确宽高，hover触发区域可能只包含部分图片，导致交互失效
4. 简化代码：移除重复的position: relative（已在初始样式中定义），统一前缀写法（现代浏览器可省略前缀，若需兼容旧版可保留）

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