Bagaimanakah Saya Boleh Menghalang Item Menu Mendatar daripada Beralih Apabila Teks Menjadi Tebal pada Tuding?

Elemen Sebaris Beranjakan Apabila Dibuat Tebal pada Tuding

Apabila elemen dalam menu mendatar beralih apabila dilegar, ia boleh dikaitkan dengan variasi saiz antara teks biasa dan tebal . Artikel ini meneroka penyelesaian kepada masalah biasa ini.

Memahami Isu

Dalam contoh yang diberikan, senarai HTML dan CSS digunakan untuk mencipta menu mendatar. Apabila menuding pada pautan, teks menjadi tebal, menyebabkan pautan beralih kerana perbezaan lebar antara teks biasa dan tebal.

Pratetapkan Lebar

Penyelesaian melibatkan pratetapan lebar unsur menggunakan unsur pseudo yang tidak kelihatan. Elemen pseudo ini mengandungi kandungan dan gaya yang sama seperti keadaan tuding induk.

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

• Paparan: blok: Menjadikan elemen pseudo menempati lebar penuh bekasnya .
• Kandungan: attr(tajuk): Pengambilan kandungan daripada atribut tajuk induk, membenarkannya berkongsi teks yang sama.
• Berat fon: tebal: Gunakan penggayaan tebal pada elemen pseudo.
• Tinggi: 0; Limpahan: tersembunyi; Keterlihatan: tersembunyi: Menyembunyikan elemen pseudo daripada paparan, memastikan ia tidak menjejaskan penampilan keseluruhan elemen.

Dengan menggunakan elemen pseudo dengan sifat ini, lebar elemen dipraset walaupun sebelum keadaan tuding digunakan, menghapuskan isu peralihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Item Menu Mendatar daripada Beralih Apabila Teks Menjadi Tebal pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!