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

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