마우스를 올리면 수평 메뉴가 이동하는 이유는 무엇이며, 의사 요소를 사용하여 어떻게 해결할 수 있습니까?

굵은 스타일로 인해 마우스 오버 시 요소 정렬 이동

HTML 목록 및 CSS를 사용하여 가로 메뉴를 구현할 때 이동이 발생하는 것이 일반적입니다. 호버 상태가 적용될 때 메뉴 항목 정렬에 있습니다. 이러한 변화는 마우스 오버 상태의 굵은 글꼴 크기가 표준 글꼴 크기와 다르기 때문에 발생합니다.

이 문제는 SitePoint 게시물에서 논의된 문제와 유사하지만 명확한 해결책이 없습니다. 텍스트 너비가 다양하면 li 항목의 너비 설정이 불가능할 수 있습니다.

정렬 이동 해결

해결 방법은 보이지 않는 의사 요소를 사용하여 다음을 수행하는 것입니다. 요소의 너비를 미리 설정합니다. 이 의사 요소는 호버 상태의 콘텐츠와 스타일을 반영하여 호버 상태가 트리거되기 전 요소의 너비를 효과적으로 정의합니다.

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(::before)는 블록 표시로 정의되어 요소의 너비를 미리 설정할 수 있습니다.
• 콘텐츠와 호버 상태의 글꼴 가중치(attr(제목)을 사용하여 콘텐츠 설정).
• 의사 요소의 높이와 오버플로는 각각 0으로 설정되고 숨겨져 있어 보기에서 숨깁니다.

너비를 미리 설정하면 텍스트 길이나 너비 변화에 관계없이 마우스를 올려도 메뉴 항목 정렬이 유지됩니다.

위 내용은 마우스를 올리면 수평 메뉴가 이동하는 이유는 무엇이며, 의사 요소를 사용하여 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!