CSS を使用してカスタムのチェックボックス スタイルのボタンにホバー効果を追加する方法

CSS でのカスタム チェックボックス スタイルのボタンのホバー効果

ボタンに似たカスタム スタイルのチェックボックスを作成する場合は、ホバーを追加するとよいでしょう。ユーザーエクスペリエンスを向上させる効果。 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>

このコードユーザーがその上にマウスを移動したときに、:hover 疑似クラスを使用して #ck-button 要素をターゲットにします。次に、背景プロパティが赤に設定され、ホバー時にボタンの背景色が変更されます。

デモ:

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

以上がCSS を使用してカスタムのチェックボックス スタイルのボタンにホバー効果を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。