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

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

您可以添加：

* {  box-sizing: border-box;}

到您的 css sheet 或者可能只是到您的 #logo id。

你可能会找到更多关于这个的信息（对我来说至少是惊人的财产）here

（以防万一...标记的代码将属性应用于您网站中的每个 html 元素，这正是我在最近的许多项目中一直在做的不后悔）

Answer 2

您应该将 box-sizing: border-box 添加到 CSS 中的相关元素。这会将填充放在容器的宽度内。

这里有一个codepen来演示：http://codepen.io/himmel/pen/LVPPvg

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;，您还可以使用 calc 函数减去一个值。

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

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

Answer 5

box-sizing: border-box 在这种情况下并没有真正使 'circle' 正确渲染边框 - 虽然它是一个惊人的属性。如果是我，我会将您的 css 更改为以下内容：

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

并将您的#logo class 边距调整为

{margin: 0 9px 0 9px;}

有点'hackier'，但我更喜欢这种行为

Answer 6

你也可以使用方框阴影：

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

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

Answer 7

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

` #父元素{ position:relative;

}

#logo { position:absolute; }`

Answer 8

尝试添加border:1px实心透明；到非悬停元素。

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

Elements move on hover because border is added, padding, as suggested elsewhere doesn't seem to work

html

css

hover

border