3 回答

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊
發(fā)生這種情況是因?yàn)槟趧h除邊界。不要將其刪除,而是使其與背景顏色相同。
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
或者,如果您希望邊框真正消失,請(qǐng)使用transparent:
.button:hover {
background: red;
border-color: transparent;
}

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊
看下面的代碼,.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>

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
我以前也遇到過這個(gè)問題
當(dāng)您將鼠標(biāo)懸停在按鈕上時(shí),該部分會(huì)稍微移動(dòng)的原因是該按鈕可能使用相對(duì)定位。這意味著按鈕相對(duì)于其父元素定位,當(dāng)您將鼠標(biāo)懸停在其上時(shí),瀏覽器會(huì)向上或向下移動(dòng)父元素,以為按鈕的懸停效果騰出空間。
要解決此問題,您可以對(duì)按鈕使用絕對(duì)定位。這將相對(duì)于視口定位按鈕,因此當(dāng)您將鼠標(biāo)懸停在其上時(shí),它不會(huì)移動(dòng)父元素。
以下是如何使用絕對(duì)定位來解決此問題的示例:
.button {
position: absolute;
top: 0;
left: 0;
}
- 3 回答
- 0 關(guān)注
- 264 瀏覽
添加回答
舉報(bào)