마우스 오버 시 텍스트가 굵게 변할 때 가로 메뉴 항목이 이동하는 것을 방지하려면 어떻게 해야 합니까?

호버를 굵게 표시하면 인라인 요소가 이동합니다.

가로 메뉴 내의 요소가 마우스를 가져가면 이동하는 것은 일반 텍스트와 굵은 텍스트 사이의 크기 변화 때문일 수 있습니다. . 이 문서에서는 이 일반적인 문제에 대한 해결책을 살펴봅니다.

문제 이해

제공된 예에서는 HTML 목록과 CSS를 사용하여 가로 메뉴를 생성합니다. 링크 위로 마우스를 가져가면 텍스트가 굵게 표시되고 일반 텍스트와 굵은 텍스트 간의 너비 차이로 인해 링크가 이동됩니다.

너비 사전 설정

해결책에는 사전 설정이 포함됩니다. 보이지 않는 의사 요소를 사용하는 요소의 너비. 이 의사 요소에는 상위 요소의 hover 상태와 동일한 콘텐츠 및 스타일이 포함되어 있습니다.

a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

• Display: block: 의사 요소가 컨테이너의 전체 너비를 차지하도록 만듭니다. .
• Content: attr(title): 상위 제목에서 콘텐츠를 가져옵니다. 속성을 사용하여 동일한 텍스트를 공유할 수 있습니다.
• 글꼴 두께: 굵게: 의사 요소에 굵은 스타일을 적용합니다.
• 높이: 0 ; 오버플로: 숨김; 가시성: 숨김: 요소의 전체 모양에 영향을 주지 않도록 의사 요소를 보기에서 숨깁니다.

이러한 속성을 가진 의사 요소를 사용하면 요소의 너비가 호버 상태가 적용되기 전에도 사전 설정되어 이동 문제를 제거합니다.

위 내용은 마우스 오버 시 텍스트가 굵게 변할 때 가로 메뉴 항목이 이동하는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!