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

情况

我正在建立一个网站,并希望有一些元素在将鼠标悬停在它们上方时创建边框/轮廓.这很简单,可以完成工作.作为参考,请参阅Stagin area link的暂存站点.我正在使用最新bootstrap和Box-sizing模型的网格部分.

问题

我发现在悬停时,正在徘徊的内容下面的内容被“推”到下一个元素下方.使用滞留区域作为参考,我可以通过CSS更改行为以在左侧或右侧修复此问题,但不能同时进行.

码

这是我用来产生效果的CSS的片段：

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

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

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

为了澄清有关继承的属性,我已将有问题的元素的边距/填充设置为标准行为的’0！important’,直到悬停

问题

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

解决方法

就个人而言 – 我选择了以下内容：

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

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