在添加 CSS 邊框時如何防止懸停時元素抖動？

在懸停時保持元素與CSS 邊框對齊

在Web 開發中，增強用戶體驗通常涉及在懸停狀態下添加視覺回饋。但是，在懸停時向元素添加邊框可能會由於佔用額外的空間而導致輕微的視覺變化。本文探討如何在不訴諸背景圖像的情況下緩解此問題。

考慮以下程式碼：

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

此程式碼為懸停時的項目元素設定背景顏色。它還在元素頂部添加了 1px 實心邊框。然而，邊框會增加一個額外的像素空間，導致元素在懸停時「跳躍」。

為了解決這個問題，我們可以採用一種稱為「隱形邊框」的技術。透過使邊框透明，我們保留了元素的位置，同時仍然達到了預期的效果：

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

在此程式碼中，我們將 item 元素的邊框設為 1px 純色透明。這會建立一個不添加任何可見空間的邊框。當元素懸停在上方時，邊框顏色會變更為 #d0d0d0，變得可見並保持元素的對齊方式。

透過利用此技術，我們可以在懸停時有效地添加 CSS 邊框，而無需更改元素的對齊方式。這確保了無縫且具有視覺吸引力的用戶體驗，同時保持程式碼簡單性。

以上是在添加 CSS 邊框時如何防止懸停時元素抖動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！