CSS만으로 콘텐츠를 숨기거나 표시하고 실수로 숨기는 것을 방지하는 방법은 무엇입니까?

CSS만 사용하여 콘텐츠 목록 숨기기/표시

문제:

숨기는 방법 /자바스크립트 없이 CSS만 사용하여 콘텐츠를 표시합니다. 페이지의 아무 곳이나 클릭하지 않고 "숨기기" 버튼을 클릭해야만 콘텐츠가 숨겨지도록 합니다.

초기 해결 방법:

제공된 HTML 및 CSS 코드를 사용하면 콘텐츠를 숨기고 표시할 수 있지만 페이지의 아무 곳이나 클릭하면 콘텐츠를 숨길 수 있습니다.

해결책:

이 문제를 해결하려면 다음 수정된 CSS를 사용하세요.

<code class="css">body {
  display: block;
}

.span3:focus ~ .alert {
  display: none;
}

.span2:focus ~ .alert {
  display: block;
}

.alert {
  display: none;
}</code>

따라서 HTML 구조를 업데이트하세요.

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

작동 방식:

이 솔루션은 CSS의 ~(형제) 선택기를 사용하여 초점이 맞춰진 요소의 형제 요소를 대상으로 합니다. "Hide Me" 버튼에 초점이 맞춰지면 인접한 .alert 요소가 표시: 없음;으로 설정되어 콘텐츠가 숨겨집니다. 반대로, "Show Me" 버튼에 초점이 맞춰지면 인접한 .alert 요소가 표시되도록 설정됩니다: block;, 콘텐츠 표시.

위 내용은 CSS만으로 콘텐츠를 숨기거나 표시하고 실수로 숨기는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!