Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencapai Perubahan Gaya Butang Berterusan pada Klik?

Bagaimana untuk Mencapai Perubahan Gaya Butang Berterusan pada Klik?

DDD
DDDasal
2024-10-31 00:42:29770semak imbas

How to Achieve Persistent Button Style Changes on Click?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn