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;
}

デモ

購入前にお試しください

別の方法として、「通常の」状態で境界線の色を透明に設定することもできます。