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

CSS を使用してチェックボックス スタイルのボタンにホバー効果を実装する

CSS を使用してチェックボックスにボタンのような外観を作成するのは一般的な方法です。視覚的な強化は効果的に達成できますが、ホバー効果がないため、ユーザーの対話性が制限される可能性があります。この記事では、チェックボックス スタイルのボタンにホバー効果を追加する際の問題に対処します。

HTML と 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">div label input {
  margin-right: 100px;
}

body {
  font-family: sans-serif;
}

#ck-button {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}

#ck-button label {
  float: left;
  width: 4.0em;
}

#ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
}

#ck-button label input {
  position: absolute;
  top: -20px;
}

#ck-button input:checked + span {
  background-color: #911;
  color: #fff;
}

#ck-button:hover {
  background: red;
}</code>

ホバー効果を有効にするには、新しい CSS ルールがミックスに追加されます:

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

このルールは、ユーザーがボタン上にマウスを移動すると、ボタンの背景色が赤になり、望ましい視覚的なフィードバックが提供され、使いやすさが向上します。

ライブ デモ:

[ライブ デモは次のサイトでご覧いただけます。 JSFiddle](http://jsfiddle.net/zAFND/4/)

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