当我悬停按钮时，按钮会稍微移动

Question

我刚刚学习了 CSS 并尝试做一些教程。

我有一个带有此 CSS 的按钮

.btn {

    padding: 9px 25px;

    border-radius: 5px;

    margin-left: 24px;

    cursor: pointer;

}

.btn-sign-up {

    font-size: 14px;

    border-color: rgba(238, 67, 116, 1);

}

我只想按钮改变颜色，并在悬停时删除边框。

但结果就是这样： 结果图片

我已经用谷歌搜索了它，但被卡住了，因为结果我得到了另一个教程如何让我的按钮移动，而不是让它不动。

对不起，我的英语不好。提前致谢！

编辑：在我尝试制作另一个按钮后，这是因为border: none;这使我的按钮稍微移动。有没有其他方法可以使边框消失但按钮不移动？

Answer 1

发生这种情况是因为您正在删除边界。不要将其删除，而是使其与背景颜色相同。.button {  border: 1px solid red;}.button:hover {  background: red;  border-color: red;}或者，如果您希望边框真正消失，请使用transparent：.button:hover {  background: red;  border-color: transparent;}

Answer 2

看下面的代码，.btn:hover你可以编写你的CSS.btn:hover {&nbsp; &nbsp; background-color: red;&nbsp; &nbsp; color: #fff;}.btn {&nbsp; &nbsp; padding: 9px 25px;&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; margin-left: 24px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; border: 1px solid red;}.btn:hover {&nbsp; &nbsp; background-color: red;&nbsp; &nbsp; color: #fff;}.btn-sign-up {&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; border-color: rgba(238, 67, 116, 1);}<div class="btn">one</div><div class="btn">two</div>

Answer 3

我以前也遇到过这个问题当您将鼠标悬停在按钮上时，该部分会稍微移动的原因是该按钮可能使用相对定位。这意味着按钮相对于其父元素定位，当您将鼠标悬停在其上时，浏览器会向上或向下移动父元素，以为按钮的悬停效果腾出空间。要解决此问题，您可以对按钮使用绝对定位。这将相对于视口定位按钮，因此当您将鼠标悬停在其上时，它不会移动父元素。以下是如何使用绝对定位来解决此问题的示例：.button {position: absolute;&nbsp;top: 0;&nbsp;left: 0;}