元素在悬停时移动，因为添加了边框，填充(如其他地方所建议的那样)似乎不起作用 [英] Elements move on hover because border is added, padding, as suggested elsewhere doesn't seem to work

问题描述

当我将鼠标悬停在测试网站上的某个区域上时，便添加了边框.但是因为发生了这种情况，其他元素也会移动.我查找了其他帖子，他们建议添加填充，但这似乎不起作用，因为它会覆盖其他内容.

When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.

这是我添加边框的地方

#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;
}

有人知道如何帮助我吗?还有关于我问问题的方式.

Does anyone know how to help me? Also about the way I asked my question.

#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>

问候， 袋熊大师

推荐答案

box-sizing:在这种情况下，border-box并不能真正使带有边框的圆形"正确呈现-尽管这是一个了不起的特性.如果是我，我会将您的CSS更改为以下内容:

box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:

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

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

and adjust your #logo class margins to

{margin: 0 9px 0 9px;}

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

a little 'hackier', but I prefer the behaviour

这篇关于元素在悬停时移动，因为添加了边框，填充(如其他地方所建议的那样)似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！