一尘不染

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

css

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

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

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


阅读 389

收藏
2020-05-16

共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;
}
2020-05-16