CSS 悬停边框使内联元素略微调整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8625812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hover border makes inline elements adjust slightly
提问by user1082764
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
我有一个完整的无序列表或锚点。我有一个 CSS :Hover 事件，它为它添加了边框，但是当我悬停时，左侧的所有锚点都会略微调整，因为它会为宽度添加 1px 并自动调整。我如何确保定位是绝对的？
I made a JS Fiddle here.
我在这里做了一个 JS Fiddle 。
回答by Wesley Murch
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
可以在非悬停状态添加透明边框，避免边框出现时的“跳跃”：
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
回答by moey
You can also use outline, which won't affect the width i.e. so no "jump" effect. However, unfortunately, you cannot make an outline rounded.
您也可以使用outline，这不会影响宽度，即没有“跳跃”效果。但是，不幸的是，您不能使轮廓变圆。
回答by jbutler483
You could use a box shadow, rather than a border for this sort of functionality.
对于此类功能，您可以使用框阴影，而不是边框。
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
这是有效的，因为您的阴影不会“在 DOM 中占用大小”，因此不会影响定位，与边框不同。
Try using a declaration like
尝试使用类似的声明
box-shadow:0 0 1px 1px #102447;
instead of your
而不是你的
border:1px solid #102447;
on your hover state.
在你的悬停状态。
Below is a quick demo of this in action:
以下是此操作的快速演示：
DEMO
演示
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}<div id="homecontainer">
<div id="homeheader">
<ul>
<li><a href="#">this</a>
</li>
<li><a href="#">that</a>
</li>
<li><a href="#">this again</a>
</li>
<li><a href="#">that again</a>
</li>
</ul>
</div>
</div>回答by GolezTrol
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
添加 1px 的边距并在悬停时删除该边距，因此它被边框替换。
回答by emilie zawadzki
You can use box-shadow which does not change your box-size, unlike border.
与边框不同，您可以使用不会改变框大小的框阴影。
回答by s.n
Just add the following code into your css file
只需将以下代码添加到您的 css 文件中
#homeheader a {
border:1px solid transparent;
}
回答by Sword I
After taking a long time pressure i found a cool solution. Hope that it will help others.
在承受了很长时间的压力后，我找到了一个很酷的解决方案。希望它能帮助别人。
on the add the folloing code :
在添加以下代码：
HTML
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
现场检查：现场演示
Hope it will help.
希望它会有所帮助。
回答by Ziggy
The CSS "box-sizing" attributefixed this problem for me. If you give your element
CSS “box-sizing”属性为我解决了这个问题。如果你给你的元素
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the insideof the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
然后在浏览器计算其宽度时将边框的宽度添加到框的内部。这样，当您打开和关闭边框样式时，元素的大小不会改变（这就是您观察到的抖动的原因）。
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
回答by mccc
Add a negative margin on hover to compensate:
在悬停时添加负边距以补偿：
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
In the fiddle the margin: -1px;is a little more complex because there was a margin-rightgetting overridden, but it's still just a matter of subtracting the newly-occupied space.
在小提琴中margin: -1px;有点复杂，因为有一个margin-right被覆盖，但它仍然只是减去新占用的空间的问题。
回答by Apoorva Jaiswal
The easiest method I found was using 'outline' instead of 'border'.
我发现的最简单的方法是使用“轮廓”而不是“边框”。
#home:hover{
outline:1px solid white;
}
instead of
代替
#home:hover{
border:1px solid white;
}
Works the best!
效果最好！
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
