Bagaimana Mudah Mengubah Imej pada Klik dengan CSS?

Tukar Imej pada Klik dengan Mudah

Bosan dengan kod JS kompleks yang diperlukan untuk menukar imej pada klik? Terokai penyelesaian yang lebih mudah menggunakan pemilih pseudo atau kelas .aktif.

Memahami Penyelesaian

Untuk menukar imej pada klik tanpa kod JS yang meluas, anda boleh memanfaatkan perkara berikut teknik:

• Pemilih Pseudo: Anda boleh mencipta pemilih pseudo yang menyasarkan elemen pada klik dan menggayakannya dengan imej yang berbeza menggunakan CSS.
• .Kelas aktif: Dengan menggunakan kelas .aktif pada elemen sasaran pada klik, anda boleh menggunakan CSS untuk memaparkan imej yang dikehendaki.

Melaksanakan Penyelesaian

Menggunakan Pemilih Pseudo:

li:hover img, li:active img {
    display: none;
}

li:hover img#new_image, li:active img#new_image {
    display: block;
}

Menggunakan Kelas .aktif:

1. Tambah kelas .aktif kepada elemen senarai sasaran: li.active.
2. Tentukan peraturan CSS untuk kelas ini:

li.active img {
    display: none;
}

li.active img#new_image {
    display: block;
}

Contoh Kod dengan .active Class:

<ul>
  <li><img>

Nota: Ingat untuk menambah pendengar acara klik yang sesuai atau gunakan atribut onclick inline untuk mencetuskan perubahan.

Atas ialah kandungan terperinci Bagaimana Mudah Mengubah Imej pada Klik dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!