굵은 글꼴을 적용할 때 마우스 오버 시 인라인 요소가 이동하는 이유는 무엇이며, 의사 요소는 이를 어떻게 해결할 수 있습니까?

굵은 스타일로 인해 마우스를 올리면 인라인 요소가 이동합니다

많은 개발자는 마우스를 올리면 굵은 글꼴을 적용할 때 인라인 요소가 이동하는 문제에 직면합니다. 예를 들어, 목록 항목에 동적 텍스트 콘텐츠가 있는 경우 목록에 이 문제가 발생할 수 있습니다.

제공된 예에서는 HTML 목록과 CSS를 사용하여 가로 메뉴가 생성되었으며 링크를 굵게 표시하기 위해 마우스 오버 스타일이 적용되었습니다. 그러나 굵은 글꼴로 인한 요소 너비 변경으로 인해 마우스를 올리면 메뉴 항목이 이동합니다.

의사 요소를 사용한 솔루션

이 문제를 해결하기 위해 영리한 해결 방법은 보이지 않는 의사 요소를 사용하여 요소의 너비를 미리 설정하는 것입니다. 이 의사 요소의 내용은 상위 요소의 내용과 일치하며 호버 스타일이 적용됩니다. 이 의사 요소를 시각적으로 숨김으로써 굵은 호버 스타일을 적용하기 전에 상위 요소의 너비를 효과적으로 사전 설정했습니다.

수정된 CSS 코드는 다음과 같습니다.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

의사 요소를 추가하여 -element 및 해당 호버 스타일, 요소의 너비는 굵은 스타일이 적용되기 전에 미리 설정됩니다. 결과적으로 메뉴 항목은 더 이상 마우스를 가져가는 동안 이동하지 않습니다.

사용 및 고려 사항

각 링크의 제목 속성 값은 예상되는 마우스 오버 텍스트와 일치해야 합니다. . 이렇게 하면 의사 요소가 각 링크의 너비를 올바르게 미리 설정할 수 있습니다.

이 솔루션은 특히 동적 텍스트 콘텐츠가 있는 인라인 요소에 대해 작동한다는 점에 유의하는 것이 중요합니다. 더 복잡한 요소나 시나리오의 경우 대체 접근 방식이 필요할 수 있습니다.

위 내용은 굵은 글꼴을 적용할 때 마우스 오버 시 인라인 요소가 이동하는 이유는 무엇이며, 의사 요소는 이를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!