Question

我遇到了这个问题：

Jsfiddle.net

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

从某种意义上说，文本的数量对此负责（也就是说，如果我在每个div中放置的字符数量或多或少相同，一切都按预期工作），但我希望有一些灵活性尊重每个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;
}

Answer 2

您需要已经存在边框，因此在添加边框时，它不会移动边框的宽度。

所以我所做的是将边框设置为白色，然后将右边框改回原来的颜色。然后在悬停时整个边框会改变颜色，因此不需要进行1px边距修正。更新了小提琴：http://jsfiddle.net/ePWNg/6/

.preview{
    width: 250px;
    float: left;
    padding: 1em;
    margin:0.2em;
    border: 1px solid white; /* this adds in the extra borders to begin with */
    border-right: 1px solid lightgray;
}

.preview:hover {
    border: 1px solid blue;
}

浮动div并排时悬停选择器

2 个答案: