SCSS实现按钮悬停隐藏上层图片露出底层图片问题求助

• CSS 相邻兄弟选择器 + 仅能匹配当前元素之后紧邻的同级元素，你的 .back 类图片位于 <button> 元素之前，所以 .figure-button:hover + .back 规则永远无法匹配到目标元素，自然不会生效。
• 你没有给两张图片设置重叠定位样式，默认流式布局下两张图片上下排列，就算选择器生效也看不到上下层切换的效果。

方案1：使用 :has() 选择器（兼容现代浏览器，无需修改HTML结构） #

首先补充基础布局样式，让两张图片重叠：

.figure {
  position: relative;
  // 宽高设置为和图片一致即可
  width: 300px;
  height: 300px;
}
.figure-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上层图片层级更高 */
.front {
  z-index: 2;
  transition: opacity 0.3s ease; // 加过渡效果更顺滑
}
.back {
  z-index: 1;
}
.figure-caption-test {
  display: none;
  position: relative;
  z-index: 3;
  margin-top: 320px; // 按需调整文本位置
}

修改悬停触发规则：

// 悬停按钮时隐藏上层图片
.figure:has(.figure-button:hover) .front {
  opacity: 0;
}
// 原有文本显示逻辑保留
.figure-button:hover + .figure-caption-test {
  display: block;
}

方案2：调整HTML结构（兼容旧版浏览器） #

将按钮调整到图片之前，利用通用兄弟选择器 ~ 匹配后续元素：

修改后HTML #

<figure class="figure">
  <button class="figure-button" id="figure-button">REVEAL ANSWER</button>
  <img class="figure-image lazyload front" src="/image.png">
  <img class="figure-image lazyload back" src="/image2.png">
  <figcaption class="figure-caption-test" id="reveal-text">HiddenText</figcaption>
</figure>

对应SCSS规则 #

// 悬停按钮隐藏上层图片
.figure-button:hover ~ .front {
  opacity: 0;
  transition: opacity 0.3s ease;
}
// 调整文本显示的选择器
.figure-button:hover ~ .figure-caption-test {
  display: block;
}

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