图片画廊点击放大后仅显示对应描述的实现问题咨询

你的核心问题是点击放大图片时所有描述框都会显示，原因是当前描述的显示逻辑仅依赖容器hover状态，且放大后的图片脱离文档流后无法精准关联对应描述。以下是针对性解决方案：

步骤1：修改JavaScript逻辑，关联图片与对应容器 #

给被点击图片的父容器添加专属标识（active类），以此区分需要显示描述的容器：

const images = document.querySelectorAll('.gallery img');

function toggleEnlarged(event) {
  const image = event.target;
  const container = image.closest('.image-container');
  const allContainers = document.querySelectorAll('.gallery .image-container');

  if (image.classList.contains('enlarged')) {
    image.classList.remove('enlarged');
    container.classList.remove('active');
  } else {
    // 重置所有图片和容器的状态
    for (let i = 0; i < images.length; i++) {
      images[i].classList.remove('enlarged');
      allContainers[i].classList.remove('active');
    }
    image.classList.add('enlarged');
    container.classList.add('active');
  }
}

for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('click', toggleEnlarged);
}

步骤2：调整CSS规则，精准控制描述显示 #

通过active类控制仅当前放大图片的描述显示，并优化放大状态下描述的位置：

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: black;
  min-height: 100vh;
}

.gallery .image-container {
  position: relative;
  width: 25%;
  margin: 10px;
  margin-bottom: 45px;
  text-align: center;
}

.gallery img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.gallery img.enlarged {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  object-fit: contain;
  cursor: pointer;
  border: 10px solid white;
  background-color: gray;
  box-sizing: border-box;
}

/* 默认隐藏所有描述 */
.gallery .image-container p {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  text-align: center;
  color: white;
  font-size: 14px;
  background-color: rgba(1, 20, 50, 1);
  padding: 5px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* 鼠标悬停容器时显示描述 */
.gallery .image-container:hover p {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}

/* 放大状态下，将描述固定在屏幕底部居中 */
.gallery .image-container.active p {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 80%;
  opacity: 1;
  pointer-events: auto;
}

/* 隐藏非active容器的描述 */
.gallery .image-container:not(.active) p {
  opacity: 0;
  pointer-events: none;
}

步骤3：保持原有HTML结构不变 #

你的HTML代码无需修改，继续使用原有的容器嵌套结构即可：

<div class="gallery">
  <div class="image-container">
    <img src="https://picsum.photos/100?random=1" alt="Image 1">
    <p>Description of Image 1</p>
  </div>
  <div class="image-container">
    <img src="https://picsum.photos/100?random=2" alt="Image 2">
    <p>Description of Image 2</p>
  </div>
  <div class="image-container">
    <img src="https://picsum.photos/100?random=3" alt="Image 3">
    <p>Description of Image 3</p>
  </div>
</div>

关键逻辑说明 #

1. 通过closest('.image-container')精准定位当前图片的父容器，确保状态切换只作用于目标元素
2. 用active类作为标识，配合CSS的:not(.active)选择器，强制隐藏非目标描述
3. 放大状态下将描述改为fixed定位，避免因原容器位置导致的显示错位

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