Mengapa Menu Mendatar Saya Beralih pada Hover, dan Bagaimana Saya Boleh Membetulkannya Menggunakan Pseudo-elements?

Penjajaran Elemen Beranjakan pada Tuding Kerana Penggayaan Tebal

Apabila melaksanakan menu mendatar menggunakan senarai HTML dan CSS, adalah perkara biasa untuk menghadapi anjakan dalam penjajaran item menu apabila keadaan tuding digunakan. Peralihan ini berlaku kerana saiz fon tebal dalam keadaan tuding berbeza daripada saiz fon standard.

Isu ini serupa dengan yang dibincangkan dalam siaran SitePoint, tetapi tanpa penyelesaian yang jelas. Menetapkan lebar item li mungkin tidak boleh dilaksanakan jika lebar teks berbeza-beza.

Menyelesaikan Anjakan Penjajaran

Penyelesaian terletak pada penggunaan elemen pseudo yang tidak kelihatan untuk pratetapkan lebar elemen. Elemen pseudo ini mencerminkan kandungan dan penggayaan keadaan tuding, dengan berkesan mentakrifkan lebar elemen sebelum keadaan tuding dicetuskan.

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

Dalam penyelesaian ini:

• Pseudo -elemen (::before) ditakrifkan dengan paparan blok, membolehkan ia pra-menetapkan lebar elemen.
• Ia mewarisi kandungan dan berat fon daripada keadaan tuding (menggunakan attr(title) untuk menetapkan kandungan).
• Ketinggian dan limpahan elemen pseudo ditetapkan kepada 0 dan tersembunyi, masing-masing, untuk menyembunyikannya daripada pandangan.

Dengan pratetap lebar, item menu mengekalkannya penjajaran pada tuding, tanpa mengira variasi panjang atau lebar teks.

Atas ialah kandungan terperinci Mengapa Menu Mendatar Saya Beralih pada Hover, dan Bagaimana Saya Boleh Membetulkannya Menggunakan Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!