Ciri kelas pseudo dinamik CSS: tuding, aktif dan fokus

Sifat kelas pseudo dinamik CSS: tuding, aktif dan fokus, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, CSS ialah teknologi yang sangat penting yang dapat merealisasikan gaya dan reka letak halaman. Selain tetapan penggayaan asas, CSS juga menyediakan beberapa sifat kelas pseudo dinamik, seperti tuding, aktif dan fokus, yang boleh menukar gaya elemen apabila pengguna berinteraksi dengannya. Artikel ini akan memperkenalkan tiga atribut kelas pseudo dinamik ini secara terperinci dan memberikan contoh kod khusus.

1. Atribut pseudo-class

hover ialah atribut pseudo-class yang dicetuskan apabila pengguna menuding tetikus pada elemen. Dengan menetapkan atribut hover, kita boleh menukar gaya elemen apabila tetikus dilegar. Berikut ialah contoh khusus:

Kod HTML adalah seperti berikut:

<button class="button">悬停我</button>

Kod CSS adalah seperti berikut:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

Dalam contoh di atas, kami mencipta elemen butang Dalam keadaan awal, warna latar belakang butang adalah biru dan teksnya berwarna putih. Warna latar belakang butang bertukar kepada merah apabila tetikus melayang di atasnya.

2. Atribut kelas pseudo aktif

aktif ialah atribut kelas pseudo yang dicetuskan apabila pengguna mengklik pada elemen. Dengan menetapkan atribut aktif, kita boleh menukar gaya elemen apabila diklik. Berikut ialah contoh khusus:

Kod HTML adalah seperti berikut:

<button class="button">点击我</button>

Kod CSS adalah seperti berikut:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

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

Dalam contoh di atas, kami mencipta elemen butang Dalam keadaan awal, warna latar belakang butang adalah biru dan teks berwarna putih. Apabila pengguna mengklik butang, warna latar belakang butang bertukar kepada hijau.

3. Atribut pseudo-class Focus

focus ialah atribut pseudo-class yang dicetuskan apabila pengguna meletakkan fokus pada elemen. Biasanya digunakan untuk elemen bentuk seperti kotak input. Berikut ialah contoh khusus:

Kod HTML adalah seperti berikut:

<input type="text" class="input">

Kod CSS adalah seperti berikut:

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

Dalam contoh di atas, kami mencipta elemen kotak input, dan warna sempadan kotak input berwarna kelabu dalam keadaan awal. Apabila pengguna meletakkan fokus pada kotak input, warna sempadan kotak input berubah kepada biru.

Perlu diambil perhatian bahawa atribut kelas pseudo hover, aktif dan fokus hanya dicetuskan apabila pengguna berinteraksi dengan elemen, jadi tabiat pengendalian pengguna mesti dipertimbangkan semasa mereka bentuk gaya halaman.

Ringkasan:

Atribut kelas pseudo dinamik CSS boleh meningkatkan pengalaman pengguna dengan menukar gaya elemen. Dalam artikel ini, kami mempelajari tentang tiga sifat kelas pseudo dinamik yang biasa digunakan: tuding, aktif dan fokus serta memberikan contoh kod khusus. Saya harap artikel ini akan membantu pembangunan bahagian hadapan anda.

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