Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich Inhalte nur mit CSS ausblenden/anzeigen und versehentliches Ausblenden verhindern?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 01:50:29580Durchsuche

How to Hide/Show Content with CSS Only and Prevent Accidental Hiding?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn