> 웹 프론트엔드 > CSS 튜토리얼 > CSS만으로 Div를 표시하거나 숨길 수 있나요?

CSS만으로 Div를 표시하거나 숨길 수 있나요?

Linda Hamilton
풀어 주다: 2024-11-22 10:30:15
원래의
222명이 탐색했습니다.

Can You Show and Hide Divs with CSS Only?

CSS만 사용하여 Div 표시 및 숨기기

CSS만 사용하여 사용자 입력을 기반으로 div를 표시하거나 숨기고 싶으십니까? JavaScript에 의존하지 않고 이를 달성하는 방법을 알아봅시다.

문제 설명:

사용자가 CSS만 사용하여 클릭 시 div를 표시하고 숨기려고 합니다. 현재 jQuery를 사용하고 있지만 JavaScript가 비활성화된 상태에서도 작동하는 접근성 있는 솔루션을 선호합니다.

CSS 전용 솔루션: Checkbox Hack

순수한 CSS 솔루션의 경우, 체크박스 해킹을 고려해보세요. 이 방법에는 체크박스를 사용하여 div 표시를 제어하는 ​​방법이 포함됩니다. 확인란을 선택하면 한 세트의 스타일이 적용되고, 선택을 취소하면 다른 세트가 사용됩니다. :checked 의사 선택기는 이러한 상태를 구별하는 데 사용됩니다.

미적인 목적으로 확인란을 숨기려면 레이블에 첨부하세요.

데모 및 리소스

  • [대블렛 데모](http://dablet.com/gist/1506530)
  • [Checkbox Hack에 대한 CSS 트릭 기사](http://css-tricks.com/the-checkbox-hack/)

위 내용은 CSS만으로 Div를 표시하거나 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿