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

Question

情况

我正在建立一个网站,并希望有一些元素在将鼠标悬停在它们上方时创建边框/轮廓.这很简单,可以完成工作.有关参考,请参阅Stagin地区链接的临时站点.我正在使用最新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',直到悬停

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

Answer 1

就个人而言 - 我选择了以下内容:

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

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

Answer 2

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

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

Answer 3

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

* {box-sizing:border-box;}

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