Question

我有很多范围是center标签中的框，我希望当用户将鼠标悬停在其上时，每个框都会在现场增长。这不起作用，因为它会将所有其他元素一起移动并且看起来并不好看：

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

如果不将所有邻居推到一边，我怎样才能让它成长？

Answer 1

给.square位置绝对并将其相对于它的容器定位...

.square { 
    position:absolute; /* moves the element out of normal flow */
}

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

您可能还需要更改top伪造选择器中的left和:hover属性，因为定位是基于元素的左上角：

.square { top:50px; left:50px; }

.square:hover {
    /* ... definitions ... */

    top:25px;
    left:25px;
}

Answer 2

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

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

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

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

FIDDLE

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

Answer 3

我使用了这个技巧

将div的外部位置设置为inline-block以使它们水平对齐（不需要您）
设置外div（必填）
对内部%使用基于div的维度（选择您喜欢的任何内容，并且以这种方式工作很简单。）
关于内部div :hover状态，再次根据%设置尺寸并将其margin a / c设置为公式margin = (100-width)/2

查看演示@jsFiddle：http://jsfiddle.net/dxb28/，

在CSS中当场发展元素

3 个答案: