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>

この更新されたコードでは、「~」コンビネータを使用して、フォーカスされた要素の兄弟である要素をターゲットにします。これは、「表示」要素がフォーカスされている場合にのみ「非表示」要素 (~ .alert) が非表示になることを意味します。

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 中国語 Web サイトの他の関連記事を参照してください。