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

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 {

    background-color: red;

    color: #fff;

}

.btn {

    padding: 9px 25px;

    border-radius: 5px;

    margin-left: 24px;

    cursor: pointer;

    display: inline-block;

    background-color: #fff;

    border: 1px solid red;

}

.btn:hover {

    background-color: red;

    color: #fff;

}

.btn-sign-up {

    font-size: 14px;

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

}

<div class="btn">one</div>

<div class="btn">two</div>

Answer 3

我以前也遇到过这个问题

当您将鼠标悬停在按钮上时，该部分会稍微移动的原因是该按钮可能使用相对定位。这意味着按钮相对于其父元素定位，当您将鼠标悬停在其上时，浏览器会向上或向下移动父元素，以为按钮的悬停效果腾出空间。

要解决此问题，您可以对按钮使用绝对定位。这将相对于视口定位按钮，因此当您将鼠标悬停在其上时，它不会移动父元素。

以下是如何使用绝对定位来解决此问题的示例：

.button {

position: absolute; 

top: 0; 

left: 0;

}