在悬停时添加CSS边框，而无需移动元素

Question

我有一行要在悬停时应用背景突出显示。

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

然而，随着边境增加了1px的 额外 的元素，它使得“移动”。我在这里如何补偿以上动作（不使用背景图片）？

Answer 1

您可以使边框透明。这样，它就存在了，但却是不可见的，因此它不会推动任何事情：

.jobs .item {
    background: #eee;
    border-top: 1px solid transparent;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

如果您的元素具有指定的height和/或width，则还可以使用box-sizing:border- box;，因为此框模型在计算出的大小中包括了填充和边框宽度，例如：

.jobs .item {
    background: #eee;
    height: 40px;
    box-sizing: border-box;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}