时间戳

首页 > 解决方案 > 使用 CSS 变换使 div 变大，但似乎无法让其他 div 移动

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

问题描述

所以我有一些代码在鼠标悬停时使 div 变大，

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

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

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

标签： javascriptcss

解决方案

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

推荐阅读