鼠标悬停时让一个<div>覆盖另一个<div>

嘿，这个需求我之前做项目时刚好踩过坑！核心思路就是让左边盒子在 hover 时脱离正常文档流，这样就不会挤动右边的静态盒子了，具体实现起来很简单，我给你一步步讲：

首先是HTML结构，用一个父容器把两个盒子包起来，方便控制定位：

<div class="container">
  <div class="left-box">左边盒子</div>
  <div class="right-box">右边盒子</div>
</div>

然后是关键的CSS代码，我加了注释和过渡动画，体验更丝滑：

/* 父容器设为相对定位，作为内部绝对定位元素的参照 */
.container {
  position: relative;
  width: 600px; /* 可根据你的需求调整总宽度 */
  height: 200px; /* 盒子高度按需调整 */
}

/* 两个盒子默认并排，高度占满父容器 */
.left-box, .right-box {
  height: 100%;
  float: left;
  transition: width 0.3s ease; /* 宽度变化时的过渡动画，让效果更自然 */
}

/* 左边盒子默认样式 */
.left-box {
  width: 50%; /* 默认和右边各占一半 */
  background: #42a5f5;
}

/* 右边盒子保持静态，不需要脱离文档流 */
.right-box {
  width: 50%;
  background: #66bb6a;
}

/* 左边盒子hover时的核心样式 */
.left-box:hover {
  position: absolute; /* 脱离正常文档流，彻底避免挤动右边盒子 */
  left: 0; /* 固定在父容器左侧，不会乱跑 */
  width: calc(50% + 16.67%); /* 原来的50%加上右边的1/3，刚好覆盖右边三分之一区域 */
  z-index: 1; /* 确保左边盒子hover时能盖在右边盒子上方，不会被挡住内容 */
}

我再给你划几个必看的重点：

• 父容器的position: relative是必须的，不然左边盒子hover时绝对定位会以整个页面为参照，直接跑歪到页面左上角了。
• 用position: absolute让左边盒子脱离文档流，这是解决“右边盒子被挤走”的核心——正常文档流里元素会互相挤占空间，脱离后就完全不受这个规则限制了。
• calc(50% + 16.67%)这个计算是因为默认两边各占50%，右边的1/3就是总宽度的16.67%（50%÷3≈16.67%），加起来刚好达到你要的“覆盖右边三分之一”的效果。
• 如果你的布局用的是Flexbox，逻辑也完全一样：把父容器设为display: flex，左右盒子设flex: 1，hover时左边盒子同样设position: absolute、left: 0和对应的宽度就行。

备注：内容来源于stack exchange，提问作者CaminoDS