如何使用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中文网其他相关文章！