Cara Menukar Kandungan pada Tuding Menggunakan CSS: Bolehkah anda Gantikan \'BARU\' dengan \'TAMBAH\' menggunakan Harta `kandungan`?

Cara Menukar Kandungan pada Hover Menggunakan CSS: Meneroka Sifat Kandungan

Pengenalan

Menukar kandungan pada hover ialah satu keperluan biasa dalam pembangunan web, membolehkan pengguna berinteraksi dengan elemen dengan memaparkan maklumat tambahan atau mengubah teks. CSS menawarkan penyelesaian yang berkuasa untuk ini menggunakan sifat kandungan bersama-sama dengan ::after dan ::before pseudo-elements.

Memahami Masalah:

Matlamatnya adalah untuk tukar kandungan label daripada 'BARU' kepada 'TAMBAH' apabila tetikus melayang di atasnya. Dalam coretan kod yang diberikan, pembangun cuba mencapai ini menggunakan CSS sahaja, tetapi menghadapi kesukaran.

Meneroka Penyelesaian:

Sifat CSS utama untuk tugas ini ialah kandungan. Ia membolehkan kami memasukkan atau mengubah suai kandungan elemen secara dinamik. Dengan menggunakan ::after pseudo-element, kita boleh menambah kandungan baharu selepas kandungan sedia ada. Berikut ialah CSS yang diubah suai:

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

Pelaksanaan:

• Keadaan tuding digunakan pada elemen '.item', mencetuskan perubahan kandungan apabila pengguna melayang di atasnya.
• Sifat 'kandungan' ditetapkan kepada 'TAMBAH' dalam ::selepas unsur pseudo. Ini memasukkan teks 'TAMBAH' selepas kandungan sedia ada.

Contoh:

<code class="html"><div class="item">
  <a href="">
    <p class="label success new-label"><span class="align">New</span></p>
  </a>
</div></code>

Kesimpulan:

Dengan menggabungkan sifat kandungan dengan ::after, kami boleh menukar kandungan elemen pada tuding dengan berkesan. Teknik serba boleh ini memperkasakan pembangun untuk mencipta antara muka pengguna yang interaktif dan responsif tanpa bergantung pada JavaScript atau kaedah skrip lain.

Atas ialah kandungan terperinci Cara Menukar Kandungan pada Tuding Menggunakan CSS: Bolehkah anda Gantikan \'BARU\' dengan \'TAMBAH\' menggunakan Harta `kandungan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!