Bagaimana Menukar Gaya Butang Selepas Mengklik Daripada Semasa Memegang?

Pemilih Butang Ditekan

Kod CSS yang disediakan untuk butang menggunakan pemilih :aktif tidak mengubah gaya butang sehingga ia diklik dan diadakan. Untuk mencapai kesan yang diingini apabila gaya butang berubah selepas ia ditekan, pendekatan berbeza diperlukan.

Daripada menggunakan pemilih :aktif, yang hanya mencetuskan apabila butang sedang diklik, anda boleh menggunakan : pemilih sasaran untuk menukar gaya butang selepas ia diklik. Pemilih :target sepadan dengan elemen yang menjadi sasaran rujukan hiperpautan semasa.

Berikut ialah contoh menggunakan teg anchor () dan bukannya butang:

<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>

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

Dalam contoh ini, teg sauh mempunyai id "btn" dan pautan ke id yang sama. Apabila pautan diklik, teg sauh menjadi sasaran rujukan hiperpautan dan pemilih :target digunakan, menukar gaya butang kepada merah.

Atas ialah kandungan terperinci Bagaimana Menukar Gaya Butang Selepas Mengklik Daripada Semasa Memegang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!