我刚刚学习了 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;这使我的按钮稍微移动。有没有其他方法可以使边框消失但按钮不移动？
3 回答
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
发生这种情况是因为您正在删除边界。不要将其删除，而是使其与背景颜色相同。
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
或者，如果您希望边框真正消失，请使用transparent：
.button:hover {
background: red;
border-color: transparent;
}
DIEA
TA贡献1820条经验 获得超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>
幕布斯7119047
TA贡献1794条经验 获得超8个赞
我以前也遇到过这个问题
当您将鼠标悬停在按钮上时，该部分会稍微移动的原因是该按钮可能使用相对定位。这意味着按钮相对于其父元素定位，当您将鼠标悬停在其上时，浏览器会向上或向下移动父元素，以为按钮的悬停效果腾出空间。
要解决此问题，您可以对按钮使用绝对定位。这将相对于视口定位按钮，因此当您将鼠标悬停在其上时，它不会移动父元素。
以下是如何使用绝对定位来解决此问题的示例：
.button {
position: absolute;
top: 0;
left: 0;
}
- 3 回答
- 0 关注
- 42 浏览
添加回答
举报
0/150
提交
取消