Gunakan CSS untuk mencapai kesan teks ke imej_CSS/HTML

Untuk sekeping teks, apabila tetikus mengklik pada teks, teks itu hilang, tetapi tempat teks asal pada asalnya bertukar menjadi gambar Apabila tetikus mengklik pada gambar, gambar itu hilang dan teks asal muncul semula. Ia seperti sihir, bukankah ia menarik?! Kesan ini juga boleh dicapai menggunakan fungsi Behavirs Dreamweaver, tetapi itu memerlukan penambahan program JavaScript, yang jelas menambah banyak kod. Menggunakan CSS untuk mencipta kesan ini memerlukan lebih sedikit kod.

Prinsip: Ambil kesempatan daripada fakta bahawa nilai sifat CSS boleh diubah secara dinamik.

Idea: Tentukan dua nilai atribut atribut CSS elemen HTML, dan kemudian gunakan peristiwa untuk mencetuskannya Setelah peristiwa itu berlaku, nilai atribut elemen HTML ditukar untuk mencapai tujuan yang diingini .

Kaedah pengeluaran:

1. Masukkan sekeping teks dalam halaman web, sertakan dengan teg "Span" dan tambahkan atribut "ID" CSS padanya (iaitu, berikan teks nama kod, seperti: "Text1" , untuk pengenalan); masukkan gambar lain, sertakan juga dengan "Span", dan tambahkan atribut "ID" padanya, seperti: ID="image1";

2. Tambahkan kod CSS berikut antara 〈head〉 dan 〈/head〉 kod sumber halaman web:

　〈style type="text/css"〉