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 중국어 웹사이트의 기타 관련 기사를 참조하세요!