如何让hover状态的div完全覆盖底层div？现有代码问题排查

我帮你排查了代码里的几个关键问题，正是这些问题导致了红框高度异常、hover层无法完全覆盖的情况：

核心问题点 #

• 定位方式错误：.hover-content使用position: relative，这会让它在文档流中占据空间，加上额外的padding-top:30%直接撑开了父元素的高度，同时无法覆盖在红框上层。
• 冗余的padding设置：父元素.project-box已经通过padding-top:30%实现了方形比例，子元素.hover-content重复设置padding-top:30%完全多余，反而导致高度溢出。
• 选择器逻辑偏差：原代码用.default-box:hover .default-hover触发hover效果，但.default-box本身是红框容器，和.project-box是同一个元素，调整hover触发的选择器可以让逻辑更清晰。

修正后的代码 #

CSS部分 #

.project-box {
  position: relative;
  width: 30%;
  padding-top: 30%; /* 用padding实现固定方形比例 */
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  position: absolute; /* 让红框铺满父容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

.hover-content {
  position: absolute; /* 改为绝对定位，覆盖在红框上层 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 可选：快速居中文字 */
  align-items: center;
  justify-content: center;
  color: white; /* 让文字在半透明背景上更清晰 */
}

.default-hover {
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.project-box:hover .default-hover {
  opacity: 1;
}

HTML部分 #

<div class="project-box">
  <div class="default-box"></div>
  <div class="default-hover hover-content">hello</div>
</div>

修复后的效果说明 #

• 默认状态下显示纯净的红色方形，没有多余高度溢出
• 鼠标悬停时，半透明黑色层完全覆盖红框，文字可以通过flex轻松居中（你也可以根据需求调整文字位置）
• 过渡动画流畅，完全匹配你想要的项目板块交互效果

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