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

Question

我有一个云元素，它们都处于悬停状态。

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

但在悬停时，所有其他元素都会进行奇怪的重新对齐，如果未触发悬停，则会切换回来。

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

我在这里错过了什么。

-----> http://jsfiddle.net/mMGAU/

Answer 1

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

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

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

演示

Try before buy

作为替代方案:您还可以在“正常”状态下将边框颜色设置为透明。