Bagaimana untuk Mengubah Suai Penampilan Butang Selepas Ia Ditekan Menggunakan :target Pseudo-class?

Pemilih Butang "Ditekan"

Apabila bertujuan untuk mengubah penampilan butang selepas ia ditekan, pemilih :aktif konvensional mungkin tidak mencukupi . Pemilih ini hanya tercetus apabila butang ditekan secara fizikal.

Untuk mencapai kefungsian yang diingini, pendekatan alternatif ialah menggunakan kelas pseudo :target. Kelas ini diaktifkan apabila titik sauh yang sepadan (#btn dalam kes ini) disasarkan.

Pelaksanaan:

Ganti teg dengan teg :

<code class="html"><a id="btn" href="#btn">Button</a></code>

Laraskan CSS untuk menggabungkan kelas pseudo :active dan :target:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

Dengan pelaksanaan ini, butang akan muncul pada mulanya dalam keadaan normal (putih). Apabila ia diklik, ia akan bertukar menjadi hijau (keadaan aktif). Selepas melepaskan butang, ia akan bertukar kepada keadaan merah (keadaan sasaran).

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Penampilan Butang Selepas Ia Ditekan Menggunakan :target Pseudo-class?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!