元素在悬停时移动，因为添加了边框，填充，如其他地方所建议的似乎不起作用

Question

当我将鼠标悬停在测试网站上的某个区域上时，我添加了边框。但正因为如此，其他元素才会发生变化。我查看了其他帖子，他们建议添加填充，但这似乎不起作用，因为它会覆盖其他内容。

这是我添加边框的地方：

#logo:hover {
  border: 2px solid cyan;
}

这就是它被添加到的内容：

#logo {
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

有人知道如何帮助我吗？还有我问问题的方式。

#logo {
    background-color: black;
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

#logo:hover {
  border: 2px solid cyan;
}

<div id=logo></div>

您好， 袋熊大师

Answer 1

您还可以使用框阴影：

 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }

Answer 2

您可以添加：

* {  box-sizing: border-box;}

到您的 css 表，或者可能只是到您的

#logo

id。

您可能会找到更多有关此的信息（对我来说至少是令人惊叹的财产）这里

（以防万一......标记的代码将该属性应用于您的网络中的每个 html 元素，这正是我在过去的许多项目中所做的，绝对不会后悔）

Answer 3

您应该尝试将其添加到您的#logo 中：

border: 2px solid transparent;

这将使：

#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}

或使用

box-sizing: border-box

希望有帮助！

干杯！

Answer 4

box-sizing：在这种情况下，border-box 并不能真正使“圆”与边框一起正确渲染 - 尽管它是一个令人惊奇的属性。如果是我，我会将你的 css 更改为以下内容：

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

并将 #logo 类边距调整为

{margin: 0 9px 0 9px;}

有点“黑客”，但我更喜欢这种行为

Answer 5

您应该将

box-sizing: border-box

添加到 CSS 中的相关元素。这会将填充放入容器的宽度内部。

这里有一个codepen来演示：

http://codepen.io/himmel/pen/LVPPvg

Answer 6

除了

box-sizing: border-box;

，您还可以使用 calc 函数减去一个值。

#logo:hover {
    width: calc(200px - 4px);
    height: calc(200px - 4px);
    border: 2px solid cyan;
}

当您处理百分比时，此方法可能会有所帮助，无论如何，在这种情况下这是一个很酷的技巧。

Answer 7

尝试添加边框：1px纯透明；到非悬停元素。

Answer 8

尝试使用位置：绝对；因为具有绝对位置的元素对其他元素没有影响。确保父元素具有相对位置。例如

` #父元素{ 位置：相对；

}

#标志{ 位置：绝对； }`

Answer 9

如果将此行添加到

#logo

，元素悬停时将不会移动。

#logo {
  border: 2px solid transparent;
}

当我们在悬停时对无边框元素应用边框时，该元素的大小将会增加。我们可以添加隐形边框来防止不必要的移动。