CSS 호버 테두리가 인접한 요소를 이동하는 것을 어떻게 방지할 수 있습니까?

CSS 호버 테두리로 요소 위치 조정

CSS 테두리로 호버 효과를 만들면 때때로 인접한 요소가 약간 이동하거나 "점프"할 수 있습니다. 이 문제는 테두리가 요소에 추가 너비를 추가하여 테두리가 없는 다른 요소에 비해 위치 지정이 변경될 때 발생합니다.

해결책: 투명 테두리

이 위치 지정을 해결하려면 문제가 발생하면 요소의 호버가 없는 상태에 투명한 테두리를 추가하세요. 이렇게 하면 마우스 오버 상태에 관계없이 모든 요소의 너비가 동일하여 예기치 않은 이동이 방지됩니다.

예: 수직 앵커 메뉴

내 앵커의 수직 메뉴를 고려하세요. 순서가 없는 목록. 다음 CSS 스니펫은 문제를 보여줍니다.

div a:visited, #homeheader a {
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

div a:hover {
    background-color: #D0DDF2;
    border-radius: 5px;
    border: 1px solid #102447;
}

div li {
    padding: 0;
    margin: 0px 10px;
    display: inline;
    font-size: 1em;
}

앵커 위로 마우스를 가져가면 추가된 테두리로 인해 왼쪽에 있는 모든 앵커가 오른쪽으로 약간 이동합니다.

이를 수정하려면, 마우스를 올리지 않은 상태에 투명한 테두리를 추가할 수 있습니다.

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

이 수정을 통해 모든 앵커의 너비가 일관되게 유지됩니다. "점프" 효과를 구현하고 적절한 요소 위치를 유지합니다.

위 내용은 CSS 호버 테두리가 인접한 요소를 이동하는 것을 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!