如何在不移動元素的情況下在懸停時添加 CSS 邊框？

在沒有元素移動的情況下在懸停時添加CSS 邊框

將突出顯示的背景應用於懸停效果上的元素時，新增CSS 邊框可能會導致達到意想不到的結果。額外的 1px 邊框加寬了元素，導致其位置偏移。我們如何在不訴諸背景圖像方法的情況下處理這個問題？

解決方案在於首先在元素上建立一個透明邊框：

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

這樣，邊框就存在，但是保持不可見，防止任何移動發生。應用懸停效果時：

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

突出顯示的背景與彩色邊框一起應用，但邊框不會改變元素的尺寸，因為它已經是透明的。因此，元素的位置在懸停時保持一致。

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