Html CSS - 悬停时文本移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8483768/
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 - Text moves when hovering
提问by Ben Dover
I've been at this for about an hour now, and cant seem to grip it.
Everytime I hover over this text (I'm wanting to put a background color for it to hover), the text moves, along with the bgcolor.
Here is what I got:
我已经在这里讨论了大约一个小时，似乎无法抓住它。
每次我将鼠标悬停在此文本上（我想为其悬停背景颜色）时，文本会与 bgcolor 一起移动。这是我得到的：
#innerheader ul {
list-style:none;
margin:0;
padding:0;
}
#innerheader li {
display:block;
float:left;
height:25px;
margin:0 2px;
padding:15px 10px 0 10px;
color:#FFFFFF;
font-weight:bold;
font-size:10px;
text-transform:uppercase;
}
#innerheader li a,
#innerheader li a:link,
#innerheader li a:visited,
#innerheader li a:active {
color:#FFFFFF;
text-decoration:none;
}
#innerheader li a:hover {
background-color: blue;
padding: 10px 10px 10px 10px
}
回答by Scott
Remove the padding in the hover declaration. Or simply move the padding to the anchor before the hover state, like the code below.
删除悬停声明中的填充。或者在悬停状态之前简单地将填充移动到锚点，如下面的代码。
The reason the text is moving is there is no padding on the anchor, then when you hover, there's padding.
文本移动的原因是锚上没有填充，然后当您悬停时，就会有填充。
#innerheader li a,
#innerheader li a:link,
#innerheader li a:visited,
#innerheader li a:active {
color:#FFFFFF;
text-decoration:none;
padding: 10px;
}
#innerheader li a:hover {
background-color: blue;
}
回答by chhantyal
It's because of padding. Remove it then it will work just fine.
这是因为填充。删除它然后它会工作得很好。
回答by Michael C. Gates
Get rid of padding, that is what is causing it to move.
摆脱填充，这就是导致它移动的原因。
回答by Nate B
It's moving because you are changing the padding in the hover block. Remove that and it should be fine.
它正在移动，因为您正在更改悬停块中的填充。删除它，它应该没问题。
回答by Kai Qing
you're putting padding on the li a:hover! Of course it's going to shift the text. To fix this you need to define the width and height and reduce them by the padding amount on hover. OR move the padding to the non hover state.
你在 li a:hover 上加了 padding！当然，它会改变文本。要解决此问题，您需要定义宽度和高度，并通过悬停时的填充量减少它们。或将填充移动到非悬停状态。
