Question

情况

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

问题

我发现在悬停时，正在悬停的内容下方的内容会被“推”到下一个元素下方。使用stagin区域作为参考，我可以通过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

尝试这将有效。

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

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

或者

a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}

Answer 4

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

* {box-sizing:border-box;}

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

Answer 5

当尺寸调整很重要时，边框很难处理。我发现使用盒子阴影要好得多，它只会改变背景，所以不占用大小。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

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

情况

问题

代码

问题

5 个答案: