호버 효과가 있는 버튼처럼 보이도록 확인란 스타일을 지정하는 방법은 무엇입니까?

호버 효과를 사용하여 체크박스를 버튼처럼 보이도록 스타일 지정

사용자 정의 스타일의 UI 요소를 생성하면 사용자 경험을 향상시킬 수 있습니다. 이 경우 체크박스를 버튼 모양으로 바꾸고 추가적으로 호버 효과를 구현하여 상호작용을 개선하고 싶습니다.

HTML 구조:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

CSS 스타일:

체크박스를 버튼 스타일로 지정하고 호버 효과를 구현하려면 다음 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>

이는 사용자가 버튼 스타일의 확인란 위에 마우스를 올리면 다음과 같이 지정됩니다. , 배경이 빨간색으로 변경됩니다.

라이브 예시:

다음 바이올린에서 라이브 예시를 확인하세요.

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

위 내용은 호버 효과가 있는 버튼처럼 보이도록 확인란 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!