css - 并排 float div 时悬停选择器

Question

我遇到了问题:

Jsfiddle.net

如您所见，当您将鼠标悬停在这些 div 上时，会添加边框，但它会更改尺寸，在某些情况下还会更改其他 div 的位置。

从某种意义上说，文本量是造成这种情况的原因(也就是说，如果我在每个 div 中放置或多或少相同数量的字符，一切都会按预期进行)，但我希望有一些灵 active 尊重每个 div 的内容。

我该如何解决这个问题？

问候

Answer 1

解决方案是最初给它一个白色边框，然后更改边框颜色。 W3盒模型将边框包含在DOM节点的计算宽度中，因此当添加边框时，必须重新计算宽度并调整内容。

http://jsfiddle.net/AlienWebguy/ePWNg/5/

另一种解决方案是在添加边框时删除边框的宽度和高度，如下所示:

#my_div {
    width:100px;
    height:100px;
}

#my_div:hover {
    width:98px; /* Minus 1px for top, 1px for bottom border */
    height:98px; /* Minus 1px for left, 1px for right border */
    border:1px solid #000;
}