给a:hover添加了padding后，它会发生移动，我该如何阻止这种情况发生？

Question

我的链接: <a href="#">主页</a>

CSS:

a:hover
{
    padding: 5px;
    background: black;
}

当我悬停在主页链接上时，它会移动，因为我使用了填充。我该如何避免这种情况？我希望黑色背景出现在链接的位置而不会影响其它链接。谢谢。

- good_evening

Answer 1

您可以默认添加它：

a { padding: 5px; }

或者您可以使用边距：

a { margin: 5px; }
a:hover { margin: 0px; padding: 5px; }

这应该可以运行：

a {
    padding: 5px;
}
a:hover {
    background: black;
}

- Tanner Ottinger

Answer 2

将相同的填充添加到基础类（没有悬停的a）。

- Alex Feinman

Answer 3

当鼠标悬停时，去除填充效果。如果您需要填充效果，请使用会一直存在的填充。

a{
    padding: 5px;
}

我回答了你的问题吗？

- Teja Kantamneni