制作：用填充悬停。它会移动，我该如何防止它？

Question

我的链接：<a href="#">Home page</a>

的CSS：

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

当我将鼠标悬停在主页链接上时，它会移动，因为我使用了填充。我怎么能避免呢？我希望黑色背景会出现在链接没有移动链接和其他链接的地方。感谢。

Answer 1

您可以默认添加它：

a { padding: 5px; }

或者您可以使用边距：

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

这应该有效：

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

Answer 2

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

Answer 3

在悬停时删除填充，如果你想要填充使用，那将一直存在。

a{
    padding: 5px;
}

我是否回答了你的问题？