Javascript 使用CSS转换使div变大，但可以'；我好像没法让其他人动起来

所以我有一个小代码，可以在鼠标上方使div变大

        $('.resumeBox').mouseenter(function(){
            $(this).css("transform","scale(2)");
        });
        $('.resumeBox').mouseleave(function(){
            $(this).css("transform","scale(1)");
        });

我遇到的问题是，我似乎无法让其他女主角离开。我尝试了我能想到的每一个位置或显示，但它们只是不断重叠

如果我解释得不好，这里是孤立的。

---

无需

变换：缩放（）

使用

宽度和高度

HTML

<button onclick=doThing()>Click to do thing</button>
<div id="box"></div>
<div id="box2">I want this to move down not get covered up </div>

JS

#box{
  background-color: red;  
  width: 100px;
  height: 100px;
  transform: scale(1);
  transform-origin: top left;
  transition: 500ms ease-in;
}
#box2{
  float: left;
  background-color: yellow;  
  width: 100px;
  height: 100px;
}

var c = 0;
var initialValue = 100;
function doThing(){
  if (c==1){
    //the if statement is just resetting the       box if already big
    $('#box').css({
      height: (initialValue + (initialValue / 2 )) + 'px',
      width: (initialValue + (initialValue / 2 )) + 'px'
    });
    c = 0;
  } else {
    $('#box').css({
      height: initialValue+'px',
      width: initialValue+'px',
    });
    c=1;
  }
}

---

转换后的元素将从文本流中取出，请参见（“对象将充当其包含的任何

位置：固定的
元素的包含块”）。转换时，原始维度不会更改，因为它已从流中取出。如果只想使其增长，可以更改宽度和高度，并在元素上放置一个过渡，使其具有动画效果。这样，内容将移开