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

Elements move on hover because border is added, padding, as suggested elsewhere doesn#39;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.

这是我添加边框的地方:

This is where I add the border:

#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

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