호버 효과로 인해 절대 위치에 있는 요소가 이동하는 것을 방지하려면 어떻게 해야 합니까?

CSS 호버 테두리 조정: 절대 위치 보장

테두리가 있는 요소에 호버 효과를 적용할 때 약간의 위치 변경이 발생하는 것은 드문 일이 아닙니다. 추가된 너비. 이는 특히 정확한 정렬이 필요한 요소의 경우 실망스러울 수 있습니다.

문제:

테두리를 추가하는 호버 효과가 있는 정렬되지 않은 앵커 목록을 고려해 보세요. 앵커 위로 마우스를 가져가면 다른 앵커가 왼쪽으로 약간 이동하여 전체 레이아웃을 방해합니다.

해결책:

절대 위치를 유지하려면 투명 테두리를 추가하세요. 요소의 호버가 없는 상태. 이는 자리 표시자 역할을 하여 실제 테두리가 마우스 오버 시 나타날 때 예상치 못한 불안을 방지합니다.

CSS:

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

이 수정은 앵커에 투명한 테두리를 추가합니다. 초기 상태에서. 호버 상태가 적용되면 위치가 변경되지 않고 실제 실선 테두리가 나타납니다.

데모:

다음 업데이트된 JS Fiddle 데모를 방문하여 실제 솔루션을 확인하세요. :

http://jsfiddle.net/TEUhM/3/

위 내용은 호버 효과로 인해 절대 위치에 있는 요소가 이동하는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!