CSS에 의도하지 않은 콘텐츠 숨김을 방지하는 방법: \':focus\' 문제에 대한 솔루션

CSS를 사용하여 콘텐츠 목록 숨기기/표시: 의도하지 않은 동작 해결

CSS만 사용하여 콘텐츠를 숨기고 표시하는 솔루션을 추구하며, 개발자에게 문제가 발생했습니다. 지정된 "숨기기" 링크를 클릭하는 것이 아니라 페이지의 아무 곳이나 클릭하면 콘텐츠가 숨겨질 수 있습니다.

개발자의 초기 코드는 다음 CSS를 사용했습니다.

<code class="css">#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}</code>

이 코드는 "숨기기" 링크를 클릭하면 콘텐츠를 성공적으로 숨깁니다. 그러나 CSS 규칙은 ":focus" 의사 클래스를 대상으로 하기 때문에 페이지의 일부를 클릭하여 숨길 수도 있습니다.

이 문제를 해결하려면 다음과 같이 업데이트된 CSS를 사용할 수 있습니다.

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}</code>

이 업데이트된 코드에서는 "~" 연결자를 사용하여 포커스가 있는 요소의 형제 요소를 대상으로 합니다. 즉, "hide" 요소(~ .alert)는 "show" 요소에 초점이 맞춰진 경우에만 숨겨집니다.

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>

이번 개정으로 접근 방식에서는 이제 개발자의 의도대로 "Hide Me" 요소를 클릭할 때만 콘텐츠가 숨겨집니다.

위 내용은 CSS에 의도하지 않은 콘텐츠 숨김을 방지하는 방법: \':focus\' 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!