仅用CSS实现图片Hover切换时焦点图片的box-shadow效果

当然可以！纯CSS完全能实现这个效果，而且可以和你已经做的hover切换层级逻辑完美联动起来～我给你梳理一下实现思路和代码：

核心思路 #

咱们的需求很明确：只有当前处于顶层（z-index更高）的图片显示阴影，非顶层的自动隐藏阴影。结合你用CSS Grid堆叠图片的基础，我们可以通过CSS伪类和选择器来精准控制阴影的显示逻辑。

实现步骤与代码 #

1. HTML结构（保持你的堆叠布局基础）

<div class="image-stack">
  <img src="image-1.jpg" alt="第一张图" class="stacked-image">
  <img src="image-2.jpg" alt="第二张图" class="stacked-image">
</div>

2. CSS核心代码

/* 父容器用Grid实现图片堆叠 */
.image-stack {
  display: grid;
  width: 400px; /* 按需调整容器大小 */
}

.stacked-image {
  /* 让两张图片完全重叠在同一个Grid单元格 */
  grid-area: 1 / 1;
  width: 100%;
  object-fit: cover;
  /* 过渡动画：阴影变化平滑，层级切换无延迟 */
  transition: z-index 0s ease, box-shadow 0.3s ease;
  /* 默认状态：层级一致，无阴影 */
  z-index: 1;
  box-shadow: none;
}

/* 鼠标hover时，提升目标图片层级并显示阴影 */
.stacked-image:hover {
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* 阴影样式可按需调整 */
}

/* 处理后面的兄弟元素：当前图被hover时，后面的图自动隐藏阴影 */
.stacked-image:hover ~ .stacked-image {
  box-shadow: none;
}

/* 处理前面的兄弟元素：用:has()伪类检测父容器内的hover状态，隐藏前面图的阴影 */
.image-stack:has(.stacked-image:first-child:hover) .stacked-image:last-child {
  box-shadow: none;
}

关键逻辑拆解 #

1. 堆叠基础：通过grid-area: 1 / 1让两张图片在Grid容器里完全重叠，这是你已经实现的部分。
2. hover触发层级与阴影：当鼠标悬停在某张图片上时，提升它的z-index到顶层，同时给它添加阴影效果。
3. 兄弟元素阴影控制：
   • 用相邻兄弟选择器~处理后面的图片：当前面的图被hover时，后面的图自动去掉阴影。
   • 用CSS的:has()伪类处理前面的图片：它能检测父容器内是否有指定状态的子元素，从而精准控制另一张图的阴影显示（比如第二张图hover时，第一张图的阴影会自动消失）。

额外优化：初始默认顶层图 #

如果你希望其中一张图默认就是顶层并显示阴影，只需要给它加默认样式即可：

.stacked-image:first-child {
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

兼容性说明 #

:has()伪类已经被Chrome、Firefox 121+、Safari等现代浏览器广泛支持，如果需要兼容旧版浏览器，可能需要少量JS辅助，但现代环境下纯CSS完全够用～

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