鼠标悬停内部div展开时父div下移的问题求助

我看了你的问题和代码，核心问题出在父容器的inline-flex布局和对齐方式上。当子元素SlideBarBox-Info从高度0变为20px时，父容器的对齐基线被改变，导致整个父div莫名下移。下面是具体的分析和修复方案：

问题根源 #

你给父容器SlideBarBox设置了display: inline-flex和align-items: flex-end，而inline-flex元素默认采用基线对齐（baseline）。当子元素高度从0变为20px时，父容器的基线位置发生变化，直接带动整个容器下移。另外，子元素初始高度为0但边框仍然存在，这也会对布局产生微小的干扰。

修复方案 #

方案1：强制父容器顶部对齐 #

给父容器添加vertical-align: top，强制它和其他inline元素保持顶部对齐，这样子元素高度变化就不会影响父容器的位置：

.SlideBarBox {
  width: 25%;
  height: 34%;
  border: 1px solid black;
  display: inline-flex;
  align-items: flex-end;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 3%;
  vertical-align: top; /* 新增这一行 */
}

方案2：优化子元素初始样式 #

子元素初始高度为0，但边框会占据额外空间，建议调整子元素的边框样式，避免不必要的布局干扰：

.SlideBarBox-Info{
  height: 0px;
  width: 100%;
  border-top: 1px solid black; /* 只保留顶部边框，贴合从底部展开的逻辑 */
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  overflow: hidden;
}

方案3：用CSS hover替代JS事件监听 #

其实完全可以不用JavaScript，直接用CSS的:hover伪类实现动画，代码更简洁也更稳定：

.SlideBarBox:hover .SlideBarBox-Info {
  height: 20px;
}

替换后你可以删掉原来的两段JS事件监听代码，减少DOM操作带来的潜在问题。

验证效果 #

把上面的修改组合起来，父容器会固定在初始位置，子元素在鼠标悬停时从底部向上平滑展开，不会再带动父容器下移。

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