css 通过移动其余的 div 来改变大小影响

Question

如果有人能帮助我解决悬停时灰色框会影响黄色和红色框的问题，请将它们进一步向下移动。我不希望发生这种情况，只有灰色框可以更改其大小。

代码如下：

HTML

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>

CSS

.st {
    height: 100px;
    width: 100px;
    background-color:gray;
}
.st:hover {
    height: 110px;
}
.sot {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:yellow;
}
.sots {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:red;
}

http://jsfiddle.net/khqxd0mr/1/

感谢您提供任何解决方案， CP

Answer 1

将 margin-bottom: -10px 添加到 .st:hover 您正在破解 CSS 盒子模型以保留位置。 -10px是相对于展开高度110px.

Updated JSfiddle

.st {
  height: 100px;
  width: 100px;
  background-color: gray;
}
.st:hover {
  height: 110px;
  margin-bottom: -10px;
}
.sot {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: yellow;
 
}
.sots {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: red;
 
}

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>

Answer 2

您可以使用转换

.st {
    height: 100px;
    width: 100px;
    background-color:gray;
    transform-origin:center top;
}
.st:hover {
    transform: scaleY(1.1);
}
.sot {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:yellow;
}
.sots {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:red;
}

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>

css 通过移动其余的 div 来改变大小影响

css change size affects by moving rest of the divs

css

size

move