悬停状态下奇怪的重新对齐

Question

我有一个项目云，它们都具有悬停状态。

:hover {
  opacity: 1;
  border: 1px solid #333333;
}

但是在悬停所有其他项目时会得到一个奇怪的重新对齐，如果没有触发悬停则会切换回来。

我试着让他填充更大，但它仍然是相同的。

我在这里缺少什么。

- - - - ＆GT; http://jsfiddle.net/mMGAU/

Answer 1

问题是，新边框使元素2px更宽。你可以这样解决：

champs-tag-card {
    padding: 1px;
}

.champs-tag-card:hover {
    padding: 0;
}

<强>演示

Try before buy

作为替代方案：您还可以在＆＃34; normal＆＃34;中将border-color设置为透明。状态。

Answer 2

在悬停时，您添加一个1px边框，该边框通常不存在。这会导致元素在宽度和高度上增长2px。这会导致您的其他元素相应地重新对齐。

您可以在元素上放置一个初始的1px透明边框，以便在设置边框时不会调整大小。

.champs-tag-card {
    border: 1px solid transparent;

http://jsfiddle.net/mMGAU/11/

Answer 3

border 正在增加宽度，因此请使用 outline 属性。

.champs-tag-card:hover {
    opacity: 1;
    outline: 1px solid #333333;
}

JSFiddle

Answer 4

尝试添加：

border:1px solid transparent;

到.champs-tag-card。边界占用空间，这导致重新对齐。