Bagaimana Bekerja dengan Pemilih Peristiwa CSS3 - dummies

Sebagian besar perubahan CSS3 bersifat statis - Anda meminta browser untuk mencari tag, atribut, atau pola tertentu. Namun, penyeleksi acara memilih objek berdasarkan peristiwa tertentu, seperti mouse di atas.

Saat pengguna mengarahkan penunjuk mouse ke suatu objek, perubahan format objek menandakan bahwa peristiwa telah terjadi. Saat pengguna menggerakkan pointer mouse dari objek, pemformatan kembali normal. Daftar berikut memberitahu Anda tentang penyeleksi acara yang biasanya digunakan dokumen.

• : hover: Memilih objek saat penunjuk mouse melayang di atasnya. Pengembang biasanya menggunakan fitur ini untuk menunjukkan bahwa item dipilih atau untuk menampilkan rincian tentang suatu objek. Anda melihat fitur ini digunakan cukup sering dengan sistem menu untuk menampilkan item submenu.

• : focus: Memilih objek saat objek memiliki input (keyboard) fokus. Ini biasanya digunakan dengan bentuk untuk menunjukkan bidang mana yang dipilih untuk input. Salah satu penggunaan pemilih yang menarik ini adalah dengan menampilkan bidang yang dipilih dalam font berukuran lebih besar untuk mempermudah masukan.

Penyelenggara acara berguna karena Anda dapat menggunakannya untuk membuatnya muncul saat halaman berinteraksi dengan pengguna tanpa menulis satu baris kode pun. Semuanya terjadi sebagai bagian dari gaya. Prosedur berikut menunjukkan satu cara untuk menggunakan penyeleksi acara untuk menghasilkan efek visual.

1. Buat ExternalCSS. HTML dan ExternalCSS. File CSS dan salin ke folder baru.

2. Buka ExternalCSS. CSS.

3. Ketik kode berikut setelah gaya yang ada dan simpan perubahan ke disk.

   p: hover, h1: hover {hiasan teks: tidak ada; font-family: "Arial", sans-serif; ukuran huruf: xx-besar; warna: biru biru; background-color: Plum;}
   

4. Muat ulang halaman percobaan.

5. Arahkan kursor mouse di atas teks paragraf.

   Anda melihat efek membuat perubahan gaya. Gaya teks berubah agar sesuai dengan kriteria pemilihan.

   

6. Arahkan mouse ke teks tajuk.

   Teks paragraf kembali normal dan teks tajuknya sekarang sesuai dengan kriteria pemilihan. Anda bisa menggunakan pendekatan ini dengan objek di layar dan membuat perubahan apa pun yang diinginkan.