当场在CSS中增加元素 [英] Growing an element on the spot in CSS

问题描述

我有很多跨度，这些跨度是 center 标记中的框，当用户将鼠标悬停在框上时，我希望每个框都能当场生长.这是行不通的，因为它会移动所有其他元素，而且看起来也不好看:

I have a lot of spans that are boxes in a center tag and I want each box to grow on the spot when the user hovers over it. This doesn't work, because it shifts all the other elements along with it and doesn't look nice:

.square:hover {
    background-color: yellow;
    width: 50px; // originally 25px
    height: 50px;// originally 25px
}

如何在不将其所有邻居都推到一边的情况下使其成长?

How can I get it to grow without shoving all of its neighbors aside?

推荐答案

我将.square包装在相同大小的相对位置的容器中，然后将.square绝对定位

I would wrap the .square in an relatively position container of the same size, then on hove make .square absolutely positioned

.squareContainer { 
    position:relative; 
    width: 25px; 
    height: 25px;
}
.square:hover { 
    position:absolute; 
    width: 50px; 
    height: 50px;
}

这样，当从流中删除.square时，它不会影响其他元素.编辑

This way when .square is removed from the flow it doesn't affect other elements. EDIT

将.square设置为绝对值似乎不起作用
但是将两者都设置为相对作品

Setting .square to absolute doesn't seem to work
but setting both to relative works

FIDDLE

http://jsfiddle.net/ur4aT/10/

这篇关于当场在CSS中增加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！