div悬停宽度切换动画异常求助：右侧悬停时左侧宽度未改变

嘿，我太懂你这个问题的糟心之处了——悬停右侧div时，它明明已经变宽到100%，却被左侧的div死死挡住，根本看不到效果对吧？这问题的核心其实很简单：你之前只给被hover的单个div加了宽度变化的样式，完全没同步控制另一个兄弟元素的宽度。咱们来一步步搞定它：

你之前的CSS逻辑大概是这样的：

.left:hover {
  width: 100%;
}
.right:hover {
  width: 100%;
}

这种写法只会修改当前被hover的div宽度，另一个div还保持着初始的宽度（比如50%），自然会把新展开的div给挡住。

下面根据不同的浏览器兼容需求，给你提供几种靠谱的实现方式：

方案1：Flex布局 + 父容器控制（推荐，现代浏览器友好） #

利用flex布局的空间分配特性，结合父容器的hover状态来同步控制两个子div的宽度，逻辑清晰且过渡顺滑。

HTML结构 #

<div class="container">
  <div class="box left">左侧内容</div>
  <div class="box right">右侧内容</div>
</div>

CSS代码 #

.container {
  display: flex;
  width: 100%;
  height: 300px;
  overflow: hidden; /* 隐藏溢出内容，避免滚动条 */
}

.box {
  flex: 1; /* 初始状态两个div各占50%宽度 */
  transition: flex 0.3s ease; /* 用flex属性做过渡，比width更适配flex布局 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
}

.left {
  background: #4285F4;
}

.right {
  background: #EA4335;
}

/* 悬停左侧时，左侧占满空间，右侧收缩为0 */
.container:hover .left:hover {
  flex: 1;
}
.container:hover .left:hover + .right {
  flex: 0;
}

/* 悬停右侧时，用:has选择器选中父容器，同步收缩左侧 */
.container:has(.right:hover) .left {
  flex: 0;
}
.container:has(.right:hover) .right {
  flex: 1;
}

注：:has选择器是现代浏览器支持的特性（Chrome 105+、Firefox 121+），如果需要兼容更老的浏览器，可以看下面的方案3。

方案2：纯CSS兄弟选择器（仅适合相邻元素，局限性大） #

因为CSS兄弟选择器只能选中当前元素之后的兄弟，所以这种写法只适合处理“悬停左侧时收缩右侧”的场景，悬停右侧时没法直接选中前面的左侧div，所以需要结合反向逻辑，或者只在布局允许的情况下使用：

/* 悬停左侧时生效 */
.left:hover {
  width: 100%;
}
.left:hover + .right {
  width: 0%;
}

/* 悬停右侧时，需要把右侧放在左侧前面，才能用兄弟选择器选左侧，但这会改变布局顺序，不推荐 */

方案3：JavaScript实现（兼容所有浏览器） #

如果需要适配旧浏览器（比如IE），用JavaScript来控制是最稳妥的方式，逻辑也更灵活：

HTML结构 #

<div class="container">
  <div class="box left" onmouseover="expandBox(this)" onmouseout="resetBoxes()">左侧内容</div>
  <div class="box right" onmouseover="expandBox(this)" onmouseout="resetBoxes()">右侧内容</div>
</div>

CSS基础样式 #

.container {
  display: flex;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.box {
  width: 50%;
  transition: width 0.3s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
}

.left {
  background: #4285F4;
}

.right {
  background: #EA4335;
}

JavaScript代码 #

function expandBox(target) {
  const allBoxes = document.querySelectorAll('.box');
  allBoxes.forEach(box => {
    box.style.width = box === target ? '100%' : '0%';
  });
}

function resetBoxes() {
  const allBoxes = document.querySelectorAll('.box');
  allBoxes.forEach(box => {
    box.style.width = '50%';
  });
}

不管用哪种方案，核心逻辑都是：当某个div被hover时，不仅要把它的宽度设为100%，还要把另一个div的宽度设为0%，这样就不会出现遮挡的问题了。

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