So verhindern Sie das unbeabsichtigte Ausblenden von Inhalten in CSS: Eine Lösung für das „:focus“-Problem

Inhaltsliste mit CSS ausblenden/anzeigen: Unbeabsichtigtes Verhalten beheben

Auf der Suche nach einer Lösung zum Ausblenden und Anzeigen von Inhalten nur mit CSS, Ein Entwickler ist auf ein Problem gestoßen: Der Inhalt konnte ausgeblendet werden, indem auf eine beliebige Stelle auf der Seite geklickt wurde, anstatt nur auf den dafür vorgesehenen Link „Ausblenden“ zu klicken.

Der ursprüngliche Code des Entwicklers verwendete das folgende CSS:

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

Dieser Code blendet den Inhalt erfolgreich aus, wenn auf den Link „Ausblenden“ geklickt wird. Es ermöglicht jedoch auch das Ausblenden durch Klicken auf einen beliebigen Teil der Seite, da die CSS-Regel auf die Pseudoklasse „:focus“ abzielt.

Um dieses Problem zu beheben, können wir das folgende aktualisierte CSS verwenden:

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

In diesem aktualisierten Code verwenden wir den „~“-Kombinator, um auf Elemente abzuzielen, die Geschwister des fokussierten Elements sind. Das bedeutet, dass das „hide“-Element (~ .alert) nur ausgeblendet wird, wenn das „show“-Element im Fokus ist.

Der HTML-Code bleibt derselbe:

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

Mit dieser Überarbeitung Ansatz wird der Inhalt jetzt nur ausgeblendet, wenn auf das „Hide Me“-Element geklickt wird, wie vom Entwickler beabsichtigt.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie das unbeabsichtigte Ausblenden von Inhalten in CSS: Eine Lösung für das „:focus“-Problem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!