大家好，我最近在做一个交互效果：当用户把鼠标悬停在图片上时，显示对应的隐藏描述内容，但折腾了好一阵都没搞定，想请大家帮我看看问题出在哪。

我目前的HTML结构和CSS代码如下：

<div class="imageContainer col-sm-6 mb-5">
  <img src="images/Mermaid.png" class="img-fluid p-4" alt="mermaid" id="page1-img" />
</div>
<div class="hidden col-sm-6 mb-5">
  <div class="appTitle text-start text-decoration-underline" id="app-title">
    Mermaid Page
  </div>
  <p class="text-start p-0"> description </p>
  <a class="btn btn-dark text-start text-start border border-white p-3" href="https://my-first-site-jj.netlify.app/" target="_blank" role="button" id="launch-app" title="Learn about Memaids" >Launch App</a>
</div>

.imageContainer { display: inline-block; transition: all 1s ease; }
.hidden { display: none; visibility: hidden; }
.imageContainer:hover .hidden { display: block; visibility: visible; }

我已经尝试了这些方法，但都没效果：

• 单独调整visibility属性，没用
• 写了JavaScript函数，用classList和addEventListener来控制显示隐藏，也没成功（也有可能是我代码写错了，但目前没找到问题）

现在的问题是，不管怎么弄，那个描述内容始终处于不可见的状态，有没有大佬能帮我分析下问题出在哪？

内容来源于stack exchange