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

Question

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

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

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

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

我在这里想念什么。

score 2 · Accepted Answer

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

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

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

演示

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

border正在增加宽度，因此请选择outline属性。

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

score 0 · Accepted Answer

尝试添加：

border:1px solid transparent;

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

4 回答 4