Mengapa Elemen Sebaris Beralih pada Tuding Apabila Fon Tebal Digunakan, dan Bagaimanakah Elemen Pseudo Boleh Menyelesaikan Perkara Ini?

Elemen Sebaris Beralih pada Tuding Disebabkan Penggayaan Tebal

Ramai pembangun menghadapi isu peralihan elemen sebaris apabila fon tebal digunakan pada tuding. Senarai, sebagai contoh, mungkin menimbulkan masalah ini apabila item senarai mempunyai kandungan teks dinamik.

Dalam contoh yang diberikan, menu mendatar dibuat menggunakan senarai HTML dan CSS, dan penggayaan tuding digunakan untuk menebalkan pautan. Walau bagaimanapun, item menu beralih semasa tuding disebabkan oleh perubahan dalam lebar elemen yang disebabkan oleh fon tebal.

Penyelesaian Menggunakan Unsur Pseudo

Untuk menangani isu ini, seorang yang bijak penyelesaian melibatkan penggunaan unsur pseudo yang tidak kelihatan untuk pra-menetapkan lebar elemen. Kandungan unsur pseudo ini sepadan dengan unsur induk dan penggayaan tuding digunakan padanya. Dengan menyembunyikan elemen pseudo ini secara visual, kami telah menetapkan lebar secara berkesan untuk elemen induk sebelum menggunakan penggayaan tuding tebal.

Berikut ialah kod CSS yang diubah suai:

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

Dengan menambahkan pseudo -elemen dan gaya tuding yang sepadan, lebar elemen dipraset sebelum penggayaan tebal digunakan. Akibatnya, item menu tidak lagi akan beralih semasa tuding.

Penggunaan dan Pertimbangan

Nilai atribut tajuk untuk setiap pautan harus sepadan dengan teks yang dilegar yang dijangkakan . Ini memastikan elemen pseudo pra-menetapkan lebar dengan betul untuk setiap pautan.

Perlu ambil perhatian bahawa penyelesaian ini berfungsi khusus untuk elemen sebaris yang mempunyai kandungan teks dinamik. Untuk elemen atau senario yang lebih kompleks, pendekatan alternatif mungkin diperlukan.

Atas ialah kandungan terperinci Mengapa Elemen Sebaris Beralih pada Tuding Apabila Fon Tebal Digunakan, dan Bagaimanakah Elemen Pseudo Boleh Menyelesaikan Perkara Ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!