Bagaimana untuk Menambah Kesan Tuding pada Butang Gaya Kotak Semak Tersuai dengan CSS?

Kesan Tuding untuk Butang Gaya Kotak Semak Tersuai dalam CSS

Apabila membuat kotak pilihan gaya tersuai yang menyerupai butang, anda mungkin mahu menambah tuding kesan untuk meningkatkan pengalaman pengguna. Begini cara untuk mencapainya menggunakan CSS:

HTML:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

CSS:

<code class="css">#ck-button:hover {
    background:red;
}</code>

Kod ini menyasarkan elemen #ck-button menggunakan :hover pseudo-class apabila pengguna melayang di atasnya. Sifat latar belakang kemudian ditetapkan kepada merah, menukar warna latar belakang butang pada tuding.

Demo:

http://jsfiddle.net/zAFND/4/

Atas ialah kandungan terperinci Bagaimana untuk Menambah Kesan Tuding pada Butang Gaya Kotak Semak Tersuai dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!