情况
我目前正在构建一个网站,希望在鼠标悬停在某些元素上时创建边框/轮廓。这很容易实现。有关参考,请参见暂存站点:Staging Area Link。我正在使用最新的Bootstrap中的网格部分和盒模型。
问题
我发现,在悬停时,被悬停的下面的内容会被“推”到下一个元素的下面。使用暂存站点作为参考,我可以通过CSS更改行为以解决左侧或右侧的问题,但不能同时解决两个问题。
代码
这是我用来实现效果的CSS片段:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
}
使用这种方法时,除第一个元素外,其他元素的表现都符合预期。如果我尝试下面的代码段,第一个元素会正常工作,但其他元素则无法正常工作:
使用此方法后,除了第一个元素以外,其他元素的效果都是符合预期的。如果我尝试下面的代码片段,则第一个元素可以正常运行,但其他元素会出现问题:.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
margin-top: -6px;
}
为了澄清继承属性,我已将相关元素的margin/padding设置为'0 !important',以达到标准行为直到悬停为止。问题:
如何防止下面的元素被推动?