Bagaimana untuk Mencapai Perubahan Gaya Butang Berterusan pada Klik?

Pemilih Butang Ditekan

Masalah:

Anda menghadapi senario yang anda ingin ubah suai penampilan butang apabila ia ditekan untuk mencipta maklum balas visual yang ketara. Anda telah cuba menggunakan kelas pseudo :active, tetapi perubahan gaya hanya berlaku apabila anda mengklik dan menahan butang.

Jawapan:

Sementara :active pseudo-class mungkin kelihatan seperti pilihan yang sesuai, ia direka khusus untuk menggayakan elemen semasa ia sedang ditekan secara aktif. Untuk mencapai kesan yang anda inginkan, pendekatan alternatif disyorkan.

Pertimbangkan untuk menggunakan elemen penambat bukannya unsur. Ini mungkin tidak sejajar dengan keperluan awal anda, tetapi ia membuka kemungkinan tambahan jika anda tidak dapat mencari penyelesaian langsung menggunakan :

Kod CSS:

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

Kod HTML:

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

Dengan pendekatan ini, anda kini boleh melihat tingkah laku berikut:

• Keadaan biasa: Butang berwarna putih
• Semasa diklik: Butang bertukar hijau
• Selepas dilepaskan: Butang bertukar merah

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Perubahan Gaya Butang Berterusan pada Klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!