Bagaimana untuk Mengubah Kandungan Secara Dinamik pada Hover Hanya Menggunakan CSS?

Cara Menukar Kandungan pada Tuding Menggunakan CSS

Untuk menukar kandungan pada tuding menggunakan CSS sahaja, anda boleh menggunakan sifat kandungan bersama-sama dengan elemen pseudo yang ::selepas atau ::sebelum.

Dalam contoh yang disediakan, matlamatnya ialah untuk menukar teks "BARU" kepada "TAMBAH" apabila elemen itu dituding di atas. Untuk mencapai matlamat ini, tambahkan CSS berikut:

<code class="css">.item:hover a p.new-label:after {
    content: 'ADD';
}</code>

Penjelasan:

• .item:hover: Mencetuskan kesan tuding pada elemen item.
• kandungan: 'TAMBAH': Mentakrifkan kandungan yang akan dipaparkan selepas unsur pseudo.
• Apabila item itu dituding di atas, elemen pseudo :selepas dicetuskan , dan kandungan ditukar kepada "TAMBAH." Teks "BARU" asal disembunyikan menggunakan peraturan CSS lain:

Pendekatan ini membolehkan anda menukar secara dinamik kandungan elemen pada tuding menggunakan CSS tanpa bergantung pada JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Kandungan Secara Dinamik pada Hover Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!