Layout css悬停创建边框，但推送内容 处境

我目前正在建立一个网站，希望让一些元素在鼠标悬停在上面时创建边框/轮廓。这很简单，可以让它工作。有关参考资料，请参阅登台网站。我正在使用最新引导的网格部分和盒子大小模型

问题 我发现在悬停时，被悬停的内容下面的内容会被“推”到下一个元素下面很远的地方。使用stagin区域作为参考，我可以通过CSS改变行为，在左侧或右侧修复此问题，但不能同时在左侧和右侧修复

代码 下面是我用来产生效果的CSS片段：

。悬停边框：悬停{
边框：3px实心#3a3a；
显示：块；
}

使用此方法，除第一个元素外，其他任何元素的行为都符合预期。如果我尝试下一个代码段，第一个元素可以工作，但其他元素会中断：

。悬停边框：悬停{
边框：3px实心#3a3a；
显示：块；
利润上限：-6px；
}

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

问题

---

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

就我个人而言，我的观点大致如下：

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

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

试试这个会有用的

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

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

或

---

这些问题的最佳解决方案是使用“框大小：边框框”属性

* {box-sizing:border-box;}

---

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

当大小很重要时，边框很难使用。我发现使用长方体阴影要好得多，它只是改变背景，所以不占空间

---

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

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

---

你能提供一个JSFIDLE吗？我也正要发布这个。这就是您想要达到的目标，默认情况下创建边框，但将其设置为透明或其所在背景的颜色。这样，空间就已经被占用了，悬停只是简单地将边界更改为Visible，这就像一个符咒，谢谢你。试图了解CSS工作方式的一些新情况。我假设在初始页面呈现时，定义这3个像素意味着任何子元素都可以正确继承，这就是为什么悬停时可以正确呈现的原因吗？假设元素的内容是100px X 100px。边框环绕内容-为您提供一个106px X 106px的元素。如果边框仅在：hover上，则会留下一个元素，该元素在每次鼠标悬停时都会调整大小。快速修复方法是首先定义边界，但要使其透明：）这并不总是有效，我真的不知道为什么。Css很奇怪。

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