情况
我正在建立一个网站,并希望有一些元素在将鼠标悬停在它们上方时创建边框/轮廓.这很简单,可以完成工作.作为参考,请参阅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;
}
