网格布局下图片悬浮显示对应描述的异常问题求助

你的问题核心出在HTML结构的对应关系混乱和定位逻辑错误，和是否添加额外div无关，但需要重构结构来明确图片与描述的绑定关系，同时修正定位规则。

问题根源 #

1. 图片与描述的对应关系错位：HTML中部分描述在图片前、部分在图片后，JS通过index绑定的逻辑完全依赖顺序，一旦顺序不匹配就会出现显示错误描述或无描述的情况。
2. 定位参照错误：描述使用position:absolute但没有正确的相对定位父容器，导致显示位置脱离图片区域。
3. CSS与JS逻辑冲突：CSS的~选择器仅能选中后续兄弟元素，同时JS又控制显示，导致部分场景下重复触发显示。

解决方案 #

1. 重构HTML结构：封装独立卡片 #

将每张图片和对应的描述放在同一个col-md-6容器内，确保一一对应，同时为后续定位提供参照：

<div class="container justify-content-evenly">
  <div class="row">
    <!-- Mermaid卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/Mermaid.png" class="img-fluid" alt="mermaid" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">Mermaid Page</div>
        <p class="text-start p-0">
          Now this was the first webpage I ever created. It might not be responsive, but I find beauty in it's simplicity. It has significant amount of CSS, very little Javasript, and the information I used is linked to it's orginal source. It honestly made me want to learn more about coding.
        </p>
        <a class="btn btn-dark text-start border border-white p-3" href="#" target="_blank" role="button" title="Learn about Memaids">Launch App</a>
      </div>
    </div>

    <!-- World Clock卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/clock.PNG" alt="clock app" class="img-fluid" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">World Clock App</div>
        <p class="text-start p-0">
          Check what the time is not only in your area, but in the listed countries. I implemented moment_timezone and Javascript to give you the different timezone you see here. Hope you check it out and enjoy.
        </p>
        <a class="btn btn-dark text-start border border-white mb-5 p-3" href="#" target="_blank" title="Check The Time" role="button">Launch App</a>
      </div>
    </div>

    <!-- Weather App卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/Weather_App.png" alt="weather app" class="img-fluid" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">Weather App</div>
        <p class="text-start p-0">
          Do you want to know your 5 day forecast? What about in any city in the world? Just type a city in the search engine and see the results. This app was made with React and to get this information I utilized Shecodes Weather API and my own APIkey.
        </p>
        <a class="btn btn-dark text-start border border-white p-3" href="#" target="_blank" title="Check Your Weather" role="button">Launch App</a>
      </div>
    </div>

    <!-- Dictionary App卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/Dictionay.png" alt="Dictionay app" class="img-thumbnail" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">Dictionary App</div>
        <p class="text-start p-0">
          Look up anyword you want, with an old-timey feel, and possiblily have some images for examples. I incorporated two different api keys for this project. I connected the pexel api to the dictionary api so the images would match the researched word.
        </p>
        <a class="btn btn-dark text-start border border-white p-3" href="#" target="_blank" role="button" title="look up words with my Dictionary">Launch App</a>
      </div>
    </div>

    <!-- Marc Anthony卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/Marc-landing.png" alt="landing page about Marc Anthony" class="img-thumbnail" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">Marc Anthony Landing Page</div>
        <p class="text-start p-0">
          Do you love Marc Anthony music as much as I do? Or do you simply want to open your ears and mind to some salsa music? Then who better to listen to than the man who's known as the king of Salsa. Click on the launch app to have a listen
        </p>
        <a class="btn btn-dark text-start border border-white p-3" href="#" target="_blank" role="button" title="Learn about Marc Anthony">Launch App</a>
      </div>
    </div>

    <!-- AI Recipe卡片 -->
    <div class="col-md-6 mb-5">
      <div class="imageContainer">
        <img src="images/AIrecipe.png" alt="italian recipe generator" class="img-thumbnail" />
      </div>
      <div class="hidden description">
        <div class="appTitle text-start text-decoration-underline">AI Italian Recipe</div>
        <p class="text-start p-0">
          Ever wanted to make an Italian dish but didn't know where to start? Well take out the guess work and utilize my AI generated Italian Recipe app. Where you can simply type lasagna and it give you a delicious recipe within a minute.
        </p>
        <a class="btn btn-dark text-start border border-white p-3" href="#" target="_blank" role="button" title="Use AI to get a new Italian recipe">Launch App</a>
      </div>
    </div>
  </div>
</div>

注：删除了重复的id属性，id必须唯一，否则会导致DOM选择器冲突。

2. 修改CSS：实现正确的悬停定位 #

调整定位规则，让描述默认隐藏，悬停时显示在对应图片上方：

/* 卡片容器设置相对定位，作为描述的定位参照 */
.col-md-6.mb-5 {
  position: relative;
}

.imageContainer {
  width: 100%;
}

/* 描述默认隐藏，绝对定位在图片上方居中 */
.hidden.description {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  background: rgba(65, 64, 64, 0.8);
  padding: 1rem;
  border-radius: 8px;
  width: 90%;
}

/* 悬停卡片时显示描述 */
.col-md-6.mb-5:hover .hidden.description {
  display: block;
}

3. 移除冗余JS代码 #

现在通过纯CSS即可实现悬停显示逻辑，无需JS控制，直接删除原有的JS代码即可。如果坚持使用JS，也可以通过父容器关联图片与描述：

document.addEventListener('DOMContentLoaded', function () {
  const cards = document.querySelectorAll('.col-md-6.mb-5');
  cards.forEach(card => {
    const image = card.querySelector('.imageContainer');
    const description = card.querySelector('.hidden.description');
    
    image.addEventListener('mouseover', () => {
      description.style.display = 'block';
    });

    image.addEventListener('mouseout', () => {
      description.style.display = 'none';
    });
  });
});

核心改进点 #

• 结构清晰化：每组图片与描述独立封装，彻底解决顺序错位导致的对应关系错误。
• 定位精准化：描述以卡片容器为参照，确保显示在对应图片上方。
• 逻辑简化：纯CSS实现悬停交互，减少代码复杂度与冲突概率。

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