Penerokaan sifat kelas pseudo dinamik CSS: tuding, aktif dan fokus

Penerokaan sifat kelas pseudo dinamik CSS: tuding, aktif dan fokus

Pengenalan:
Sifat kelas pseudo dinamik CSS ialah alat penting untuk membina interaktiviti dan kesan dinamik. Antaranya, hover, aktif dan fokus adalah tiga atribut kelas pseudo yang paling biasa digunakan. Artikel ini akan memperkenalkan penggunaan tiga atribut kelas pseudo ini secara terperinci dan memberikan contoh kod khusus.

1. atribut kelas pseudo tuding:
   atribut kelas pseudo tuding digunakan untuk menentukan gaya apabila tetikus melayang di atas elemen. Aplikasi biasa termasuk menukar warna pautan, menunjukkan kandungan tersembunyi, dsb.

Contoh kod:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

Dalam contoh di atas, apabila tetikus melayang di atas pautan, warnanya akan ditukar kepada merah apabila tetikus melayang di atas elemen .div, ia akan dipaparkan (jika ia asalnya tersembunyi).

2. atribut kelas pseudo aktif:
   atribut kelas pseudo aktif digunakan untuk menentukan gaya apabila tetikus ditekan. Biasanya digunakan untuk mencipta kesan tekan butang atau kesan klik pautan.

Contoh kod:

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}

Dalam contoh di atas, apabila butang ditekan, warna latar belakangnya akan bertukar menjadi kuning apabila pautan diklik, warna teks pautan akan bertukar menjadi biru.

3. fokus atribut pseudo-class:
   focus pseudo-class atribut digunakan untuk menentukan gaya elemen yang sedang difokuskan. Digunakan terutamanya dalam elemen bentuk untuk menandakan medan yang pengguna masukkan.

Contoh kod:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

Dalam contoh di atas, apabila kotak input mendapat fokus, sempadan akan bertukar hijau apabila medan teks mendapat fokus, kesan bayang-bayang kuning akan dipaparkan.

Ringkasan:
Sifat kelas pseudo dinamik CSS ialah alat penting untuk mencipta kesan interaktiviti dan dinamik, di antaranya tuding, aktif dan fokus ialah tiga sifat kelas pseudo yang paling biasa. Dengan menggunakan atribut kelas pseudo ini secara rasional, anda boleh merealisasikan perubahan gaya elemen halaman dengan mudah semasa interaksi tetikus dan keadaan fokus. Kami berharap contoh di atas dapat membantu pembaca lebih memahami dan menggunakan atribut ini untuk mencipta kesan halaman web yang lebih interaktif dan dinamik.

Atas ialah kandungan terperinci Penerokaan sifat kelas pseudo dinamik CSS: tuding, aktif dan fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!