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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

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

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

以上是 在悬停时添加CSS边框，而无需移动元素 的全部内容， 来源链接： utcz.com/qa/403995.html

回到顶部