ホバー時にテキストが太字になったときに水平メニュー項目が移動しないようにするにはどうすればよいですか?

ホバー時に太字にするとインライン要素が移動する

水平メニュー内の要素がホバー時に移動する場合、通常のテキストと太字のテキストの間のサイズの違いが原因である可能性があります。この記事では、この一般的な問題の解決策について説明します。

問題を理解する

ここで示した例では、HTML リストと CSS を使用して水平メニューを作成しています。リンクの上にマウスを置くと、テキストが太字になり、通常のテキストと太字のテキストの幅が異なるため、リンクが移動します。

幅を事前設定します

解決策には、事前設定が必要です非表示の疑似要素を使用して要素の幅を調整します。この疑似要素には、親のホバー状態と同じコンテンツとスタイルが含まれています。

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

• Display: block: 疑似要素がコンテナの全幅を占めるようにします。 .
• 内容: attr(title):親の title 属性からコンテンツをフェッチし、同じテキストを共有できるようにします。
• Font-weight: 太字: 擬似要素に太字のスタイルを適用します。
• 身長: 0;オーバーフロー: 非表示;可視性: hidden: 疑似要素をビューから非表示にし、要素の全体的な外観に影響を与えないようにします。

これらのプロパティを持つ疑似要素を使用すると、要素の幅がホバー状態が適用される前でも事前に設定されているため、シフトの問題が解消されます。

以上がホバー時にテキストが太字になったときに水平メニュー項目が移動しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。