css鏈接元素跳轉懸停

Question

我想在懸停的鏈接周圍放置一個邊框，並且樣式適用於它，但是當我將它懸停時，它會跳轉（元素跳轉）...我該怎麼辦？ 代碼：

.navigation li:hover { 
    border: 1px solid #ccc; 
} 

Answer 1

你「跳」是由邊界1px的高度，使你的李舉動引起

您可以使用

.navigation li:hover { 
    border-color: #ccc; 
} 

.navigation li { 
    border: 1px solid #<parentBackgroundColor/transparent>; 
} 

代替。通過這種方式，邊界從一開始就在這裏，所以沒有懸停跳躍，並且它是不可見的，因爲它與父容器的顏色相同或是透明的。

Answer 2

.navigation li { 
    border: 1px solid transparent; 
} 

您可以添加一個透明border，當你不徘徊，那麼它不會跳。

或者，您可以刪除共有的元素周圍2px垂直padding，例如：

.navigation li { 
    padding: 10px 
} 
.navigation li:hover { 
    padding: 9px; 
    border: 1px solid #ccc; 
}