CSS를 사용하여 사용자 정의 체크박스 스타일 버튼에 호버 효과를 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 사용자 정의 체크박스 스타일 버튼에 호버 효과를 추가하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-10-28 22:55:30

원래의

387명이 탐색했습니다.

How to Add Hover Effects to Custom Checkbox-Styled Buttons with CSS?

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