太字ホバー時のインライン要素の移動を防ぐにはどうすればよいですか?

太字ホバーで移動するインライン要素: 包括的なソリューション

Web デザインの世界では、洗練された応答性の高いナビゲーション メニューを作成することが重要です。基本的なタスク。ただし、インライン リンクに太字のホバー効果を追加すると、通常のテキストと太字のテキストのサイズの違いにより、メニュー項目が著しく移動するという複雑な問題に遭遇することがよくあります。この問題は多くの開発者を困惑させ、効果的な解決策を模索させています。

幸いなことに、賢い技術でこの課題を解決できます。リンクの幅を事前に設定することで、メニューのレイアウトを中断することなく、ホバー時に太字テキストにシームレスに移行できるようになります。これは、親リンクと同じコンテンツとホバー スタイルを共有する非表示の疑似要素を使用することで実現されます。

解決策を説明するために、次のコードを考えてみましょう。

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::before 疑似要素の追加。この要素には親リンクと同じコンテンツが表示されますが、visibility: hidden を使用してビューから非表示になります。重要なのは、ホバー状態の太字のフォントの太さを継承し、リンクの幅を太字の対応部分に効果的に事前設定することです。

解決策を完了するには、各リンクに一意の title 属性を割り当てます。擬似要素のコンテンツのソースとして。これにより、擬似要素が親リンクのテキストと一致し、メニューの元の外観が維持されます。

この手法を使用すると、メニュー項目の位置を不快にさせることなく、インライン リンク上の大胆なホバー効果を実現できます。 。これは、Web 開発者が直面する一般的な問題を解決する、シンプルかつ効果的なソリューションです。

以上が太字ホバー時のインライン要素の移動を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。