Bilakah Anda Menggunakan Kelas Pseudo :focus dan :aktif?

Membezakan antara :fokus dan :Kelas Pseudo aktif

Sementara kedua-dua keadaan gaya :focus dan :aktif boleh diaktifkan melalui interaksi pengguna, fungsi mereka berbeza dengan ketara.

:fokus

• Mewakili elemen yang telah menerima fokus input dan bersedia untuk menerima input pengguna.
• Aktif apabila elemen dipilih menggunakan navigasi papan kekunci, seperti tab kunci.

:aktif

• Mewakili elemen yang sedang diklik atau diketuk secara aktif oleh pengguna.
• Selalunya mengiringi : keadaan fokus apabila elemen menerima fokus melalui satu klik.

Kunci Perbezaan

• :fokus menunjukkan bahawa elemen telah dipilih untuk input, manakala :aktif membayangkan bahawa tindakan klik atau ketik sedang dijalankan.
• :fokus dicetuskan oleh interaksi berasaskan papan kekunci, manakala :aktif dicetuskan oleh tetikus atau peristiwa berasaskan sentuhan.
• Apabila elemen diklik, ia biasanya peralihan melalui kedua-dua keadaan :focus dan :aktif.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

Bila butang pada mulanya diberikan, ia tidak mempunyai keadaan aktif atau fokus. Apabila pengguna menggunakan Tab untuk memberikannya fokus, ia memasuki keadaan :focus dan teks menjadi merah. Jika pengguna kemudian mengklik butang, ia memasuki keadaan :aktif, menyebabkan teks menjadi merah dan tebal.

Atas ialah kandungan terperinci Bilakah Anda Menggunakan Kelas Pseudo :focus dan :aktif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!