我是 Web 開發的新手，我有一個似乎無法修復的錯誤。基本上，我有一個按鈕在懸停時突出顯示并且可以作業，但是懸停時會有一個原始顏色的小輪廓。我很確定這不是因為輪廓或邊框。該錯誤顯示在提供的圖片中。這是代碼：
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
}<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
編輯：我使用的是谷歌瀏覽器和 Windows 11（如果作業系統很重要，idk）
uj5u.com熱心網友回復：
這些角落周圍的框陰影略微透明，讓您可以看到下面的米色背景色。將懸停時按鈕的背景顏色更改為與框陰影相同的顏色可解決此問題。效果總是略有不同，但我無法僅從外觀上分辨出來。
此外，在 chrome 上，此框陰影過渡會閃爍。我弄亂了它并將第 4 個數字更改為 1px，它停止閃爍。我不能告訴你為什么，但你去了。
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
overflow: hidden;
}
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>uj5u.com熱心網友回復：
我才明白為什么會這樣。這是你的“米色”背景的原因。當我將其更改為“紅色”時，看看它是怎樣的
紅色背景按鈕
修復：讓我們在使用 :hover 狀態時給出背景
所以你的代碼會像
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
background: rgb(36,36,37);
}
讓我知道情況如何
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/338341.html
標籤：javascript html css 网络