Cara Membuat Butang dengan Tiga Keadaan Berbeza: Lalai, Tuding dan Diaktifkan?

Penunjuk Butang Ditekan

Soalan:

Mencipta butang yang menogol keadaannya secara visual interaksi boleh menjadi ciri yang berguna dalam antara muka pengguna. Walau bagaimanapun, CSS yang disediakan hanya mengubah gaya butang semasa ia ditekan secara aktif. Tingkah laku yang dimaksudkan ialah mempunyai tiga keadaan yang berbeza: keadaan lalai, keadaan tuding dan keadaan diaktifkan (ditekan).

Jawapan:

Semasa menggunakan < ;butang> tag mungkin tidak menghasilkan output yang diingini, ia patut meneroka pendekatan alternatif menggunakan tag. Penyelesaian ini menyediakan kefungsian yang serupa dan mungkin menawarkan fleksibiliti tambahan:

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

Atas ialah kandungan terperinci Cara Membuat Butang dengan Tiga Keadaan Berbeza: Lalai, Tuding dan Diaktifkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!