Bagaimana Mengubah Kandungan Secara Dinamik pada Hover Menggunakan CSS ::after Pseudo-element?

Cara Menukar Kandungan pada Hover Menggunakan CSS

Menukar kandungan elemen pada hover ialah tugas biasa dalam pembangunan web. Walaupun anda mungkin menganggap ini proses yang mudah, ia memerlukan pemahaman yang lebih mendalam tentang sifat kandungan CSS bersama-sama dengan elemen pseudonya, seperti ::after dan ::before.

Dalam contoh anda, matlamatnya adalah untuk menukar kandungan label 'BARU' untuk 'TAMBAH' apabila dilegar di atas. Pada mulanya, anda mendekati isu ini dengan cuba menggunakan sifat kandungan, tetapi menghadapi kesukaran. Nasib baik, penyelesaian bijak wujud untuk mencapai kesan yang diingini.

Helahnya terletak pada menggabungkan sifat kandungan dengan elemen pseudo ::selepas:

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

Peraturan CSS ini menyasarkan p elemen dengan kelas 'label-baru' di dalam teg 'a' dalam kelas 'item' apabila dalam keadaan tudingnya. Ia kemudiannya menggantikan kandungan sedia ada secara dinamik dengan 'TAMBAH'.

Untuk menggambarkan, berikut ialah contoh yang dikemas kini:

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

<code class="CSS">body {
    font-family: Arial, Helvetica, sans-serif;
}
.item {
    width: 30px;
}
a {
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label:after{
  content: 'ADD';
}</code>

Sekarang, apabila anda menuding pada label 'BARU', ia bertukar menjadi 'TAMBAH' dengan lancar, memenuhi keperluan awal anda.

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