CSS 링크 요소가 호버 위에 점프합니다.

Question

호버의 링크 주변에 테두리를 넣으려고하는데 스타일이 적용되지만 점프하면 점프됩니다 (요소 점프) ... 무엇을 할 수 있습니까? 코드 : 당신이 유혹하지 않을 때

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

Answer 1

당신 '점프'당신의 리튬 움직임을 경계의 1 픽셀의 높이에 의해 발생

대신

.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; 
}