前端问题：Hover显示描述时如何覆盖图片顶部区域？（附代码）

阿华AIGC实验室

2026-5-13

解决方案

咱们先梳理下问题：你现在的.highlighted类给.box加了绝对定位，这会破坏Bootstrap的栅格布局（毕竟col-lg-1是依赖文档流的），而且.details没有正确的定位和背景来盖住图片。下面是具体的修改方案，帮你实现hover时用描述覆盖图片顶部50px的需求：

1. 调整CSS样式

核心是给.box设置相对定位作为容器，然后让.details绝对定位在图片顶部，用不透明背景盖住指定区域：

.products { max-width: 1200px !important; }
.products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; padding-top: 2em; }
.products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; padding-bottom: 3em; }
.box { 
  margin-top: -5em; 
  position: relative; /* 新增：让内部绝对定位元素基于它定位 */
}
.box .imgBox { padding-top: 2em; }
.box .details { 
  transition: 0.5s; 
  visibility: hidden; 
  position: absolute; /* 新增：绝对定位覆盖在图片上 */
  top: 0; /* 从图片顶部开始 */
  left: 0;
  width: 100%; /* 宽度和.box保持一致 */
  height: 50px; /* 你需要覆盖的高度 */
  background: rgba(98, 192, 23, 1); /* 不透明背景，确保完全盖住图片 */
  padding: 8px; /* 给文字留点内边距，避免挤在一起 */
  overflow: hidden; /* 防止文字超出容器 */
}
.box .details p { 
  font-size: 14px; 
  color: #ffffff; 
  margin: 0; /* 去掉默认margin，避免文字溢出 */
}
.higlighted { 
  /* 移除position: absolute; 避免打乱栅格布局 */
  cursor: pointer; 
}

2. 简化JS逻辑

原来的JS里有些冗余操作，咱们精简一下，保持功能不变：

$(document).ready(function() { 
  $('.box').hover(function() { 
    $(this).find('.details').css('visibility', 'visible'); 
    $(this).addClass('higlighted'); 
  }, function() { 
    $(this).find('.details').css('visibility', 'hidden'); 
    $(this).removeClass('higlighted'); 
  }) 
});

3. 修正HTML的小问题

注意你的HTML里有多个重复的id="box"和id="details"，HTML中id必须是唯一的，所以要删掉这些重复的id，或者统一改成class：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/200" alt="Product Image"> <!-- 改成200x200的占位图，匹配你的图片尺寸 -->
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <!-- 其他.box结构保持一致，去掉重复的id即可 -->
</div>