Bagaimanakah Saya Menggunakan CSS `:hover` dengan Betul untuk Menggariskan Elemen Sauh?

Merungkai Penggunaan "legar" dalam CSS

Dalam bidang reka bentuk web, menambahkan sentuhan interaktif pada elemen selalunya diingini. Satu mekanisme sedemikian melibatkan elemen pseudo "legar", yang membolehkan anda mengubah suai rupa elemen apabila tetikus melayang di atasnya.

Misi: Memaparkan Garis Bawah pada Tuding Tetikus

The matlamatnya adalah untuk memaparkan garis bawah apabila tetikus melayang di atas elemen penambat. Walau bagaimanapun, kod yang disediakan:

<a class="hover">click</a>

a .hover :hover {
    text-decoration: underline;
}

gagal mencapai kesan ini.

Menyingkap Pendekatan yang Betul

Untuk memastikan garis bawah muncul pada tuding tetikus, pendekatan yang dipermudahkan ialah lebih baik:

a:hover {
    text-decoration: underline;
}

Kod ini secara langsung menyasarkan elemen penambat dan menggunakan hiasan garis bawah apabila tetikus melayang di atasnya.

Menggunakan Nama Kelas

Jika dikehendaki, nama kelas "legar" boleh digunakan:

a.hover:hover {
    text-decoration: underline;
}

Sintaks ini bersamaan dengan contoh sebelumnya, memberikan fleksibiliti dalam penggayaan.

Penjelasan: Nama Kelas dan Pseudo-Element

Adalah penting untuk ambil perhatian bahawa menggunakan nama kelas "hover" tidak meningkatkan fungsi, kerana "a:hover" pseudo-element sudah mencapai kesan yang sama. Melainkan nama kelas digunakan semata-mata untuk tujuan demonstrasi, ia tidak memberikan nilai tambahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Menggunakan CSS `:hover` dengan Betul untuk Menggariskan Elemen Sauh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!