ホバー時に水平メニューが移動するのはなぜですか? 疑似要素を使用して修正するにはどうすればよいですか?

太字のスタイルにより、ホバー時に要素の配置がずれる

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

このソリューションでは:

• -要素 (::before) はブロック表示で定義されており、その幅を事前に設定できます。
• ホバー状態からコンテンツとフォントの太さを継承します (attr(title) を使用してコンテンツを設定します)。
• 擬似要素の高さとオーバーフローは 0 に設定され、

幅を事前に設定することにより、メニュー項目はホバー時に位置合わせを維持します。テキストの長さや幅の変化に関係なく。

以上がホバー時に水平メニューが移動するのはなぜですか? 疑似要素を使用して修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。