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 サイトの他の関連記事を参照してください。