굵은 마우스 오버 시 인라인 요소 이동을 방지하는 방법은 무엇입니까?

볼드 마우스 오버 시 인라인 요소 이동: 종합 솔루션

웹 디자인 세계에서 매끄럽고 반응성이 뛰어난 탐색 메뉴를 만드는 것은 근본적인 임무. 그러나 인라인 링크에 굵은 호버 효과를 추가할 때 일반 텍스트와 굵은 텍스트의 크기 차이로 인해 메뉴 항목이 눈에 띄게 이동하는 복잡한 문제에 직면하는 경우가 많습니다. 이 문제는 많은 개발자를 당황하게 하여 효과적인 솔루션을 찾게 했습니다.

다행히도 영리한 기술을 사용하면 이 문제를 해결할 수 있습니다. 링크 너비를 미리 설정하면 메뉴 레이아웃을 방해하지 않고 마우스를 올려 놓았을 때 굵은 텍스트로 원활하게 전환되도록 할 수 있습니다. 이는 상위 링크와 동일한 콘텐츠 및 호버 스타일을 공유하는 보이지 않는 의사 요소를 사용하여 달성됩니다.

해결책을 설명하기 위해 다음 코드를 고려해 보겠습니다.

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;
}

알림 의사 요소 앞에 a::를 추가합니다. 이 요소는 상위 링크와 동일한 콘텐츠를 표시하지만 visible:hidden을 사용하여 보기에서 숨겨집니다. 결정적으로, 마우스 오버 상태의 굵은 글꼴 두께를 상속하여 링크의 너비를 굵은 글꼴로 효과적으로 사전 설정합니다.

해결책을 완성하기 위해 각 링크에 고유한 제목 속성을 할당합니다. 의사 요소 콘텐츠의 소스로 사용됩니다. 이렇게 하면 의사 요소가 상위 링크의 텍스트와 일치하여 메뉴의 원래 모양이 유지됩니다.

이 기술을 사용하면 메뉴 항목 위치의 불편한 이동 없이 인라인 링크에 굵은 호버 효과를 얻을 수 있습니다. . 웹 개발자가 직면하는 일반적인 문제를 해결하는 간단하면서도 효과적인 솔루션입니다.

위 내용은 굵은 마우스 오버 시 인라인 요소 이동을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!