CSS左右生长动画实现：如何隐藏容器外的按钮溢出部分

修复方法 #

给外层.box容器添加overflow: hidden属性即可，该属性会自动裁剪所有超出容器边界的子元素内容，不影响原有悬停动效的正常运行。

修改后的核心CSS代码 #

.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100px;
  border-left: 1px solid rgba(201, 137, 211, 0.3);
  border-right: 1px solid rgba(186, 167, 252, 0.5);
  border-bottom: 1px solid rgba(186, 167, 252, 0.5);
  margin: 0 auto;
  /* 新增如下属性 */
  overflow: hidden;
}

可选优化（可移除JS代码） #

你当前的悬停动效可以完全用CSS原生伪类实现，不需要引入JS逻辑，替换原有transform触发类的CSS规则即可：

/* 移除原来的.left-button-transform、.right-button-transform类规则，替换为以下内容 */
.box:hover .button-left {
  transform: translateX(0%);
}
.box:hover .right {
  transform: translateX(0%);
}

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