Ausführliche Erläuterung der Verwendung von „Focus-within'.

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von Focus-within zu beachten sind.

:Was ist focus-within

CSS-Selektor Mittel (CSS Level 4-Selektor). Es ist, als ob Sie :focus oder :hover kennen. :focus-within ist sehr praktisch für die Handhabung des Fokusstatus. Elemente der Pseudoklasse :focus-within sind wirksam, wenn das Element selbst oder einer seiner Nachkommen den Fokus hat. Wenn der Text schwer zu verstehen ist, schauen wir uns zunächst ein einfaches Beispiel an:

<p class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</p>

nicht unbedingt den Tastaturfokus erhält und tabindex nicht festgelegt ist. Oder wenn der Link oder das Eingabeelement in p den Fokus erhält, ändert das .form-group-Element die Rahmenfarbe.

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}
.form-group:focus-within {
    border-color: #000;
}

Wenn Sie das obige Beispiel sehen, finden Sie es nicht großartig? Um ähnliche Effekte zu erzielen, mussten wir in der Vergangenheit

-Skripte verwenden. Über die Maus- oder Tastaturereignisse der untergeordneten Elemente von .form-group fügen Sie dann den entsprechenden Stil zu seinem übergeordneten Element (oder Vorgängerelement) hinzu.

:focus-within sind sehr leistungsfähig, vor allem weil die Pseudoklasse aktiviert wird, wenn eines ihrer Elemente den Fokus erhält. Verwenden Sie diese Pseudoklasse mit Vorsicht, wenn das Element viele Unterkomponenten enthält.

Mit :focus-within sind einige gängige interaktive Verhaltensweisen sehr einfach geworden, insbesondere die interaktiven Verhaltensweisen, die zuvor JavaScript-Tastaturereignisse erforderten. Wir können stattdessen :focus-within verwenden.

Als nächstes schauen wir uns einige gängige Beispiele für :focus-within an.

Ein häufiges Beispiel ist das Verhalten der Hervorhebung von Tabellenzeilen, d wird hervorgehoben. Dieser interaktive Stil kann sehbehinderten Benutzern helfen, eine komplexe Tabelle oder lange Form besser zu lesen. Durch die Hervorhebung können diese Benutzer leichter den Überblick über die Tabellenzeile behalten, die sie gerade lesen. Die in der Vergangenheit häufig implementierte Methode bestand darin, den Stil von Tabellenzeilen mit :hover zu ändern. Diese Lösung ist für normale Benutzer eine einfache Aufgabe, aber wenn Ihre Benutzer Schwierigkeiten mit der Bedienung der Maus haben, ist :hover etwas mühsam. Wenn Sie nach Perfektion suchen, können Sie über JavaScript-Tastaturereignisse Stile zu Tabellenzeilen hinzufügen.

Mit :focus-within können wir uns von JavaScript verabschieden. Wir können es so gestalten:

Das obige Beispiel zeigt, wie man :focus-within verwendet, um eine ganze Zeile einer Tabelle hervorzuheben. Wenn ein Element verfügbar ist, das in einer bestimmten Tabellenzeile den Fokus erhalten kann, bezieht sich dies auf das Fokussieren über die Tastatur. Im obigen Beispiel gibt es beispielsweise ein -Element. Sie wissen, dass das a-Element über die Tastatur fokussiert werden kann.

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

Dropdown-MenüDer Das Dropdown-Menü ist unsere beliebteste, häufig verwendete Webkomponente. Als ich die Pseudoklasse :focus-within zum ersten Mal sah, kamen mir als erstes Dropdown-Menüs in den Sinn.

Im obigen Beispiel wird JavaScript verwendet, um den Tastaturfokus des Benutzers in einem Navigations-Dropdown-Menü zu verfolgen. Wenn JavaScript erkennt, dass der Tastaturfokus auf einem Link liegt, fügen Sie eine .has-focus-Klasse zu .navlist_drop hinzu. Wenn li über die Klasse .has-focus verfügt, werden ihre untergeordneten Elemente angezeigt, dh das Dropdown-Menü wird angezeigt.

Für diesen Effekt können wir die Funktion des JavaScript-Skripts direkt durch :focus-within ersetzen. Verwenden Sie .navlistdrop:focus-within anstelle von .navlistdrop.has-focus . Dropdown-Menüs werden angezeigt, wenn Sie die Tastatur bedienen, um den Fokus auf ein Dropdown-Menüelement zu legen.

.navlist a:focus + .navlistdrop,
.has-drop:hover .navlistdrop,
.navlistdrop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Offscreen-Navigation ist ein häufiger Effekt auf mobilen Endgeräten. Dann können wir diesen Effekt auch durch :focus-within erzielen. Detaillierten Code finden Sie im folgenden Beispiel:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von „Focus-within'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!