CSS中悬停可见图片时显示隐藏图片的实现方法咨询

嘿，这两个问题核心都是利用 CSS 的:hover伪类配合选择器来控制元素显示状态，我来一步步给你拆解～

最常用的思路是把两张图放在同一父容器内，或让隐藏图成为可见图的相邻元素，通过:hover切换display属性来实现。

方案一：父容器hover控制子元素 #

把可见图和隐藏图包裹在一个容器里，默认隐藏目标图，鼠标悬停容器时触发显示：

.image-container {
  position: relative; /* 可选，用于定位隐藏图的基准 */
  display: inline-block; /* 让容器仅适配图片大小 */
}

.hidden-image {
  display: none;
  /* 若需要叠在可见图上，可添加绝对定位 */
  position: absolute;
  top: 0;
  left: 0;
}

.image-container:hover .hidden-image {
  display: block;
}

<div class="image-container">
  <img src="visible-cheese.jpg" alt="可见的奶酪图" class="visible-image">
  <img src="hidden-image.jpg" alt="隐藏的图片" class="hidden-image">
</div>

方案二：相邻兄弟选择器（+） #

如果两张图是直接相邻的，无需父容器也能实现：

.hidden-image {
  display: none;
}

.visible-image:hover + .hidden-image {
  display: block;
}

<img src="visible-cheese.jpg" alt="可见的奶酪图" class="visible-image">
<img src="hidden-image.jpg" alt="隐藏的图片" class="hidden-image">

这个需求需要结合定位和:hover来精准控制显示位置，步骤如下：

1. 给奶酪图和目标图套一个父容器，设置position: relative，让目标图的绝对定位以此容器为基准；
2. 目标图默认display: none，通过position: absolute调整到奶酪图的右上角；
3. 鼠标悬停父容器（或直接悬停奶酪图）时，切换目标图的display状态。

完整代码示例： #

/* 父容器：定位基准，同时固定在屏幕左上角 */
.cheese-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  position: relative;
  padding: 10px; /* 可选，扩大hover触发区域 */
}

/* 目标隐藏图：默认隐藏+定位 */
.target-image {
  display: none;
  position: absolute;
  /* 调整到奶酪图右上角，数值根据图片大小自行修改 */
  top: -10px;
  right: -120px;
  width: 100px;
  height: auto;
}

/* 悬停时显示目标图 */
.cheese-wrapper:hover .target-image {
  display: block;
}

<div class="cheese-wrapper">
  <img src="cheese.jpg" alt="左上角的奶酪图" class="cheese-image">
  <img src="target-image.jpg" alt="要显示的目标图" class="target-image">
</div>

优化小技巧： #

如果觉得display: none切换太生硬，可以换成透明度过渡，提升体验：

.target-image {
  opacity: 0;
  visibility: hidden; /* 避免隐藏时占用空间或被误点击 */
  transition: opacity 0.3s ease;
  /* 保留其他定位样式 */
}

.cheese-wrapper:hover .target-image {
  opacity: 1;
  visibility: visible;
}

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