元素悬停在悬停上，因为添加了边框，填充，正如其他地方建议的那样似乎不起作用

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>

问候TheWombatGuru

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。

你可以在这里找到更多关于这个的信息（对我来说至少是惊人的属性）

（以防万一...标记的代码将该属性应用于您 Web 中的每个 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

框大小调整：在这种情况下，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 中的相关元素中。这会将填充放在容器的宽度内。

下面是一个代码笔来演示： 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

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

'#parent 元素 {职位：相对;

}

#logo {位置：绝对;}`

Answer 9

如果将此行添加到 #logo 中，则悬停时元素将不会移动。

#logo {
  border: 2px solid transparent;
}

当我们在悬停时将边框

应用于无边框元素时，元素的大小会增加。我们可以添加不可见的边框来防止不必要的移动。

相邻元素呢？如果我们为相邻元素添加透明边框，则元素之间会有间隙。在这种情况下，我们应该添加与背景颜色相同的边框。

原始代码：

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

添加此行：

 #logo {
        border: 2px solid black;
    }