CSS에서 요소를 숨기고 표시하는 방법

웹 개발에서는 메뉴, 프롬프트 상자 등과 같은 특정 요소를 숨기거나 표시해야 하는 경우가 종종 있습니다. JavaScript가 이 기능을 수행할 수 있지만 때때로 우리는 너무 많은 스크립트를 도입하거나 브라우저 호환성을 제한하고 싶지 않습니다. CSS 클릭-표시-숨기기 기술을 사용하면 JavaScript를 사용하지 않고 CSS를 사용하여 요소를 숨기고 표시할 수 있습니다.

CSS 클릭하여 표시 숨기기 기술을 사용하는 방법은 무엇입니까?

먼저 요소를 숨기도록 표시: 없음;으로 설정합니다. 예:

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

두 번째로 버튼이나 링크와 같은 트리거를 추가하여 사용자가 클릭할 때 숨겨진 요소가 표시되도록 합니다. 이 효과를 얻으려면 CSS에서 :checked 의사 클래스 및 ~ 형제 선택기를 사용해야 합니다.

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

이 예에서는 체크박스 요소를 트리거로 사용하고 있습니다. 이 확인란을 선택하면 숨겨진 요소가 표시됩니다. 이 효과는 CSS의 :checked 의사 클래스 및 ~ 형제 선택기를 통해 달성됩니다. 확인란을 선택하면 해당 형제 요소 #myDiv가 표시됩니다.

링크나 버튼을 트리거로 사용하려면 다음 코드를 사용할 수 있습니다.

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

이 예에서는 링크 요소를 트리거로 사용했습니다. 링크에 초점이 맞춰지면 숨겨진 요소가 드러납니다. 이 효과는 CSS의 :focus 의사 클래스 및 ~ 형제 선택기를 통해 달성됩니다. 링크가 포커스를 받으면 해당 형제 요소 #myDiv가 표시됩니다.

일반 텍스트 콘텐츠가 포함된 레이블 요소를 트리거로 사용할 수도 있습니다. 이를 레이블 요소로 감싸고 for 속성에 표시하려는 요소의 ID를 지정하면 됩니다.

Summary

CSS click-to-show-hide 기술은 JavaScript를 사용하지 않고 CSS를 사용하여 요소를 숨기고 표시할 수 있는 유용한 방법입니다. :checked 의사 클래스와 ~ 형제 선택기를 사용하거나 :focus 의사 클래스와 ~ 형제 선택기를 사용하면 클릭하여 표시하는 숨겨진 기능을 모든 요소에 쉽게 추가할 수 있습니다.

위 내용은 CSS에서 요소를 숨기고 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!