在悬停时添加 CSS 边框而不移动元素 [重复]答案

【问题标题】：Add a CSS border on hover without moving the element [duplicate]在悬停时添加 CSS 边框而不移动元素 [重复]
【发布时间】：2021-01-11 09:36:17
【问题描述】：

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

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

但是，当边框向元素添加 1px additional 时，它会使其“移动”。我将如何在此处补偿上述移动（不使用背景图像）？

【问题讨论】：

你的元素有定义的高度吗？如果是这样，您可以 1) 在现代浏览器中使用 box-sizing: border-box（带有必要的前缀），或者 2) 通过添加与默认背景颜色相同的边框并将指定高度减少 1 个像素来作弊。
在下面查看我的答案，如果我在这里滞后，请告诉我，以便我更具体地了解您的问题。
我的情况不适用于以下解决方案，我什至在看到这个帖子之前就尝试过。我有多个不同的按钮，1. 已经有边框，2. 有不同的边距。我不能简单地制作透明边框，因为不悬停时我已经需要一个小边框。我不能仅仅通过差额来减少边距，因为每个边距都是不同的，而且我不能用 calc() 来做到这一点。我必须使用不同的 css 转到每个单独的元素并以不同的方式设置悬停边距（糟糕）或使边框 从我的颜色渐变到透明

标签： css

【解决方案1】：

您可以使边框透明。以这种方式它存在，但不可见，因此它不会推动任何东西：

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

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

<div class="jobs">
  <div class="item">Item</div>
</div>

对于已经有边框的元素，并且您不希望它们移动，您可以使用负边距：

.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

为现有边框添加宽度的另一个可能技巧是添加带有所需像素宽度的 spread 属性的box-shadow。

.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

【讨论】：

任何人都看到了使用 CSS 属性 box-sizing:border-box; 解决这个问题的方法？
@tim 是的，它也适用于 box-sizing:border-box;。
简单而且有效。谢谢！有时，显而易见的答案并不那么明显，直到它击中你的脸。
最好用彩色透明：
@SungWonCho for box-sizing: border-box 要工作，您需要指定元素的宽度和高度，我认为这不是您想要的。使用答案jsfiddle.net/g9qc2kg3 中描述的技术

【解决方案2】：

添加margin:-1px; 将1px 减少到每一侧。或者如果你只需要一面，你可以做margin-left:-1px等。

【讨论】：

这对我来说是最好的解决方案，因为在我的例子中，我为原始元素设置了一个 1px 的边框，并且希望在悬停时获得一个更厚的边框（3px）。使用 margin: -2px; 确实有效。
确实是边框粗细从一种状态变化到另一种状态时的最佳解决方案。
最简单的解决方案
澄清和形式化这个解决方案：仅在应用较粗边框时添加负边距，并使用等于粗边框减去细边框的边距大小。因此，要在悬停时从 2px 边框过渡到 5px 边框，您将使用 .some-class{ box-sizing: content-box; border: 2px solid #333 } 然后您将拥有 .some-class:hover{ margin: -3px; border: 5px solid #333} （或任何您喜欢的颜色）。 box-sizing: content-box 也需要在有问题的元素上，以防止它在应用粗边框时移动。 codepen

【解决方案3】：

试试这个可能会解决你的问题。

CSS：

.item{padding-top:1px;}

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

HTML：

<div class="jobs">
    <div class="item">
        content goes here
    </div>
</div>

查看小提琴的输出：http://jsfiddle.net/dLDNA/

【讨论】：

这是新的：jsfiddle.net/fbfjw/3/embedded/result
s21.postimg.org/q8n11ng6v/test_2.png
只有这个对我有用。 margin 和 border: transparent 改变了里面的内容。

【解决方案4】：

在常规项中添加border，与background 相同的color，使其无法被看到。这样，无论是否悬停，该项目都有一个border: 1px。

【讨论】：