Wie kann ich Inhalte nur mit CSS ausblenden/anzeigen und versehentliches Ausblenden verhindern?

Inhaltsliste nur mit CSS ausblenden/anzeigen

Problem:

Wie man ausblendet /zeigen Sie Inhalte nur mit CSS ohne JavaScript an und stellen Sie dabei sicher, dass der Inhalt nur durch Klicken auf die Schaltfläche „Ausblenden“ und nicht durch Klicken auf eine beliebige Stelle auf der Seite ausgeblendet wird.

Erste Lösung:

Der bereitgestellte HTML- und CSS-Code ermöglicht das Ausblenden und Anzeigen von Inhalten, der Inhalt kann jedoch durch Klicken auf eine beliebige Stelle auf der Seite ausgeblendet werden.

Lösung:

An Um dieses Problem zu beheben, verwenden Sie das folgende modifizierte CSS:

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

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

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

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

Und aktualisieren Sie die HTML-Struktur entsprechend:

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

So funktioniert es:

Diese Lösung verwendet den ~-Selektor (Geschwister) in CSS, um auf Elemente abzuzielen, die Geschwister des fokussierten Elements sind. Wenn die Schaltfläche „Hide Me“ fokussiert ist, wird das angrenzende .alert-Element so eingestellt, dass angezeigt wird: none;, wodurch der Inhalt ausgeblendet wird. Wenn umgekehrt die Schaltfläche „Zeigen“ fokussiert ist, wird das angrenzende .alert-Element so eingestellt, dass es den Inhalt anzeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich Inhalte nur mit CSS ausblenden/anzeigen und versehentliches Ausblenden verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!