我剛剛學習了 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 關注
- 245 瀏覽
添加回答
舉報
0/150
提交
取消