javascript - 使用 CSS Transform 使 div 变大，但似乎无法让其他 div 移动

Question

所以我有这段代码可以在鼠标悬停时使 div 变大，

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

我遇到的问题是我似乎无法让其他 div 移开它的方式。我已经尝试了所有我能想到的位置或显示方式，但它们总是重叠。

如果我解释得不好，这里是孤立的。 https://codepen.io/seanmc10/pen/XOwLbJ

Answer 1

不使用transform: scale() 使用witdh and height

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>

CSS

#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;
}

JS

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;
  }
}