html - 在 CSS 中当场生长一个元素

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 上使 .square 绝对定位

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

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

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

小提琴

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

Answer 3

我已经使用了这个技巧

1. 将外部divs 位置设置 inline-block为水平对齐（不需要你）
2. 设置outer的宽高div（必填）
3. 使用%基于尺寸的内部div（选择你喜欢的任何东西，这样工作很简单）。
4. 在内部 div:hover状态下，再次设置它的尺寸%并将它的margina/c 设置为公式margin = (100-width)/2

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

祝你好运:)<