CSS のみを使用してコンテンツを非表示/表示し、誤って非表示にならないようにするにはどうすればよいですか?

CSS のみでコンテンツ リストを非表示/表示する

問題:

非表示にする方法/JavaScript を使用せずに 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 要素が「display: none;」に設定され、コンテンツが非表示になります。逆に、「Show Me」ボタンがフォーカスされると、隣接する .alert 要素が display: block; に設定され、コンテンツが表示されます。

以上がCSS のみを使用してコンテンツを非表示/表示し、誤って非表示にならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。