:focus
und :active
sind zwei verschiedene Zustände.
:focus
stellt den Zustand dar, in dem das Element aktuell ausgewählt ist, um Eingaben zu empfangen, und
:active
stellt den Status dar, in dem das Element gerade vom Benutzer aktiviert wird.
Nehmen wir zum Beispiel an, wir haben eine <button>
. Der <button>
wird zunächst keinen Zustand haben. Es existiert einfach. Wenn wir Tabdem "Fokus" geben <button>
, tritt es jetzt in seinen :focus
Zustand ein. Wenn Sie dann klicken (oder drücken space), wird die Schaltfläche in den :active
Status ( ) versetzt.
In diesem Sinne, wenn Sie auf ein Element klicken, geben Sie ihm den Fokus, was auch die Illusion kultiviert, dass :focus
und :active
dasselbe sind. Sie sind nicht gleich. Wenn Sie darauf klicken, befindet sich die Schaltfläche im :focus:active
Status.
Ein Beispiel:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>
edit: jsfiddle
document.activeElement
Eigenschaft abrufen können, obwohl es sich um einen Try-Catch handeln muss, da IE8 eine Ausnahme auslösen kann. Beachten Sie auch, dass ältere Browserversionen möglicherweise Folgendes behandeln: aktiv und: unterschiedlich fokussieren.function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
:active
Status aufruftfocus
und Ihreractive
Erklärung keine Rolle. Es ist nur wichtig, wenn sie sich widersprechen, zBcolor:red
undcolor:blue
(dann gewinnt der letzte).Quelle: CSS-Pseudoklassen
quelle
visited
ändern Links den Stil nicht , wenn Sie den Mauszeiger bewegen oder darauf klicken, da ihre "Besuchsfähigkeit" die anderen Pseudoklassen überschreibt. LVHFA ist die Reihenfolge, die die meisten Menschen in den meisten Fällen verwenden möchten. Nicht sicher, warum Sie aufgenommen habenlang
...Es gibt vier Fälle.
:focus
(ohne aktiv).:active
(ohne Fokus).:active:focus
(aktiv und konzentrieren sich gleichzeitig).Beispiel:
Wenn die Seite geladen wird, sind beide in Fall 1. Wenn Sie die Tabulatortaste drücken, fokussieren Sie das zweite Div und sehen, dass es Fall 2 zeigt. Wenn Sie auf das erste Div klicken, sehen Sie Fall 3. Wenn Sie auf das zweite Div klicken, sehen Sie Fall 4 .
Ob ein Element fokussierbar ist oder nicht, ist eine andere Frage . Die meisten sind nicht standardmäßig. Aber es ist sicher anzunehmen
<a>
,<input>
,<textarea>
sind fokussierbar standardmäßig.quelle
:active
aber nicht:focus
. Das ist eine Sache, die mich verwirrt hat, dass die anderen Antworten nicht angesprochen haben.: Fokus ist, wenn ein Element Eingaben akzeptieren kann - der Cursor in einem Eingabefeld oder ein Link, zu dem eine Registerkarte erstellt wurde.
: Aktiv ist, wenn ein Element von einem Benutzer aktiviert wird - die Zeit zwischen dem Drücken einer Maustaste durch einen Benutzer und dem anschließenden Loslassen.
quelle
Aktiv ist, wenn der Benutzer diesen Punkt aktiviert (wie beim Klicken mit der Maus, wenn wir die Registerkarte von Feld zu Feld verwenden, gibt es kein Zeichen für den aktiven Stil. Vielleicht benötigt das Klicken mehr Zeit, versuchen Sie einfach, den Klick auf diesen Punkt zu halten), wird der Fokus danach ausgeführt Der Punkt ist aktiviert. Versuche dies :
quelle
Der Fokus kann nur durch Tastatureingabe gegeben werden, aber ein Element kann sowohl durch eine Maus als auch durch eine Tastatur aktiviert werden.
Wenn man verwenden würde: Fokus auf einen Link, würde die Stilregel nur gelten, wenn man ein Botton auf der Tastatur drückt.
quelle
:focus
funktioniert so nicht. Der Textbereich, den ich eingebe, ist derzeit fokussiert, da ich auf eine Schaltfläche geklickt habe. Es kann auch den Fokus verlieren und wiederherstellen, indem Sie aus ihm heraus und wieder hinein klicken. In nur einer Sekunde werde ich mich auf die Schaltfläche Kommentar hinzufügen rechts konzentrieren, indem ich darauf klicke. All dies ohne Tastatureingabe, die den Fokus verursacht.Die Verwendung von "Fokus" gibt Tastaturbenutzern den gleichen Effekt, den Mausbenutzer erhalten, wenn sie mit der Maus schweben. "Aktiv" wird benötigt, um den gleichen Effekt in Internet Explorer zu erzielen.
Die Realität ist, dass diese Zustände nicht für alle Benutzer so funktionieren, wie sie sollten. Wenn nicht alle drei Selektoren verwendet werden, treten bei vielen Benutzern, die nur über die Tastatur verfügen und physisch keine Maus verwenden können, Probleme mit der Barrierefreiheit auf. Ich lade Sie ein, die # nomouse-Herausforderung anzunehmen (nomouse dot org).
quelle