> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 호버에 숨겨진 DIV를 표시하려면 어떻게 해야 합니까?

CSS만 사용하여 호버에 숨겨진 DIV를 표시하려면 어떻게 해야 합니까?

Mary-Kate Olsen
풀어 주다: 2024-11-22 08:23:15
원래의
354명이 탐색했습니다.

How Can I Show Hidden DIVs on Hover Using Only CSS?

Hover에 숨겨진 DIV를 표시하기 위한 CSS 전용 솔루션

제시된 챌린지는 다음을 기반으로 표시되어야 하는 3개의 초기 숨겨진 DIV가 있는 메뉴와 관련됩니다. CSS만 사용하여 사용자의 메뉴 선택. 이는 JavaScript가 비활성화된 경우에도 접근성을 보장하기 위한 것입니다.

CSS 전용 접근 방식

JavaScript 없이 이를 달성하려면 "체크박스 해킹"이 필요합니다. 이 방법은 :checked 의사 선택기를 사용하여 선택 또는 선택 해제 상태에 따라 스타일이 할당된 체크박스 입력 요소를 활용합니다. 확인란을 레이블과 연결하여 숨길 수 있습니다.

예제 코드

다음 예제 코드를 고려하세요.

<input type="checkbox">
로그인 후 복사
input[type="checkbox"]:checked + div {
  display: block;
}
로그인 후 복사

이 예에서는 옵션 1의 확인란을 선택하면 "content-1" DIV가 표시됩니다. 마찬가지로 옵션 2의 확인란을 선택하면 "content-2" DIV가 표시됩니다.

추가 설명

슬라이딩/페이딩 효과에 대한 고객의 요청과 관련하여 이 JavaScript로 달성 가능합니다. 그러나 CSS 전용 솔루션의 경우에는 불가능합니다. 또는 CSS 전환을 사용하여 미묘한 페이드인 효과를 만드는 것을 고려할 수 있습니다.

위 내용은 CSS만 사용하여 호버에 숨겨진 DIV를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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