css悬停创建边框但推送内容

Question

情况

我目前正在构建一个网站，希望某些元素在将鼠标悬停在它们上方时创建边框/轮廓。这很简单，足以发挥作用。如需参考，请参阅Stagin 区域链接 的暂存站点。我正在使用最新引导程序的网格部分和盒子大小调整模型。

问题

我发现悬停时，悬停下方的内容会被“推”到下一个元素下方。使用舞台区域作为参考，我可以通过 CSS 更改行为以修复左侧或右侧的问题，但不能同时修复两者。

代码

这是我用来制作效果的 CSS 片段：

.hover-border:hover {
   border: 3px solid #3A3A3A;
   display: block;
}

使用此方法，除第一个元素之外的任何元素都会按预期运行。如果我尝试下一个片段，第一个元素可以工作，但是其他元素会中断：

.hover-border:hover {
    border: 3px solid #3A3A3A;
    display: block;
    margin-top: -6px;
}

为了澄清继承的属性，我已将相关元素的边距/填充设置为“0！重要”以实现悬停之前的标准行为

问题

如何阻止下面的元素被推送？

Answer 1

就我个人而言 - 我会遵循以下原则：

.hover-border {
  border: 3px solid transparent;
  display: block;
}

.hover-border:hover {
  border: 3px solid #3A3A3A;
}

Answer 2

解决这些问题的最佳方案是使用 box-sizing:border box 属性

* {box-sizing:border-box;}

然后元素将保留您定义的任何大小，但现在将包括边框和填充。

Answer 3

另一种代码较少的解决方案：

.hover-border:hover{
  box-shadow: inset 0 0 0 3px #3a3a3a;
}

Answer 4

试试这个会起作用的。

.hover-border {
border: 3px solid transparent;
display: block;

}
.hover-border:hover{
border: 3px solid #3a3a3a;
}

或者

a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}

Answer 5

当尺寸很重要时，边框很难处理。我发现使用 box-shadow 更好，它只会改变背景，因此不占用任何大小。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

Answer 6

这会起作用：

.hover-border:hover {
  outline: solid 4px #78CF82;
}

“因为轮廓属性不是元素尺寸的一部分；元素的总宽度和高度不受轮廓宽度的影响。”

Answer 7

边框包含在盒模型中，因此它将影响其相邻元素（尽管盒大小调整应该起作用）。

相反，我们可以使用CSS的outline属性，它显然不是盒模型的一部分，因此它不会影响其相邻元素。我从 outline | 找到了这个解决方案CSS 技巧

.hover-border {
  display: block;
}

.hover-border:hover {
  outline: 3px solid #3A3A3A;
}