Elementor WordPress实现画廊图片悬停在下方展示标题描述而非覆盖

这个需求纯CSS即可实现，不需要引入JavaScript逻辑，实现思路非常简单，核心是利用CSS的兄弟选择器匹配悬停元素对应的描述模块，下面是可直接复用的示例代码：

1. HTML结构设计 #

整个模块分为上下两个部分：上方是画廊图片列表，下方是统一的描述展示区域，所有图片对应的标题描述都提前写在下方区域内。

<div class="gallery-container">
  <!-- 画廊图片区域 -->
  <div class="gallery-img-item">
    <img src="你的图片地址1" alt="图片1">
  </div>
  <div class="gallery-img-item">
    <img src="你的图片地址2" alt="图片2">
  </div>
  <div class="gallery-img-item">
    <img src="你的图片地址3" alt="图片3">
  </div>
  
  <!-- 下方统一描述展示区 -->
  <div class="gallery-desc-area">
    <div class="desc-item">
      <h4>图片1标题</h4>
      <p>图片1的详细描述内容</p>
    </div>
    <div class="desc-item">
      <h4>图片2标题</h4>
      <p>图片2的详细描述内容</p>
    </div>
    <div class="desc-item">
      <h4>图片3标题</h4>
      <p>图片3的详细描述内容</p>
    </div>
  </div>
</div>

2. CSS核心逻辑 #

默认隐藏所有描述项，当悬停到指定图片项时，通过兄弟选择器匹配到对应序号的描述项并展示：

/* 基础布局调整，可根据你的设计修改 */
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-img-item {
  display: inline-block;
  width: 31%;
  margin-right: 3.5%;
  cursor: pointer;
}
.gallery-img-item:last-child {
  margin-right: 0;
}
.gallery-img-item img {
  width: 100%;
  height: auto;
  display: block;
}
/* 描述区域样式 */
.gallery-desc-area {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.desc-item {
  display: none;
}
/* 核心悬停匹配逻辑 */
.gallery-img-item:nth-child(1):hover ~ .gallery-desc-area .desc-item:nth-child(1),
.gallery-img-item:nth-child(2):hover ~ .gallery-desc-area .desc-item:nth-child(2),
.gallery-img-item:nth-child(3):hover ~ .gallery-desc-area .desc-item:nth-child(3) {
  display: block;
}

补充说明 #

• 如果需要平滑的过渡动画，可以把display: none/block替换为opacity: 0/1 + visibility: hidden/visible + transition属性实现淡入效果
• 如果你的需求包含「鼠标离开画廊区域后仍然保留最后一次悬停的描述显示」，才需要引入JavaScript做状态存储，否则纯CSS完全可以覆盖你的需求
• 响应式布局调整可以直接修改画廊图片项的宽度规则，描述区域无需额外适配

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