DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der Pseudo-Selektor :active ändert das Erscheinungsbild eines Links, während er aktiviert wird (angeklickt oder anderweitig aktiviert). Er ist normalerweise nur für den Bruchteil einer Sekunde sichtbar und bietet visuelles Feedback, dass das Element tatsächlich angeklickt wurde. Er wird am häufigsten auf Ankerlinks (<a href="#"></a>) angewendet.
Hier ist zum Beispiel CSS, das Ankerlinks im aktiven Zustand um einen Pixel nach unten versetzt (was den Eindruck erweckt, als würden sie in einen dreidimensionalen Raum gedrückt)
:active kann auch auf jedes Element angewendet werden. Im folgenden Pen wird die gesamte Seite gelb, wenn Sie irgendwo auf der Seite klicken.
Es ist bewährte Praxis, alle „Zustände“ abzudecken, insbesondere für Links. Eine einfache Möglichkeit, dies zu tun, ist „LOVE HATE“ oder
- L
:link - O
- V
:visited - E
- H
:hover - A
:active - T
- E
Die Reihenfolge ist ideal.
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}Wenn Sie beispielsweise den Stil für :visited zuletzt aufgeführt hätten, würde dieser Stil, wenn der Link besucht wurde, die Deklarationen für :active und :hover überschreiben, und der Link wäre immer lila, unabhängig davon, ob Sie mit der Maus darüber fahren oder ob der Link aktiv war (nicht ideal).
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle |
„entfernen“ oder „erinnern“? Als Eselsbrücke? Wow…
Eselsbrücke: Ein Gedächtnisgerät, das bei der Erinnerung an Atemwegsprobleme hilft
Funktioniert nicht unter iOS :-( Hover- oder Active-Zustände werden nicht angezeigt..
Das braucht man am Body-Tag
...Ist es nicht möglich, hier HTML-Code einzufügen, der angezeigt und nicht geparst wird?
Herr, kann ich fragen? Was muss ich verwenden, damit ich das Bild vergrößern kann, wenn ich darauf klicke? Ich habe es bereits gemacht, aber das Problem ist, dass ich #id:active{ verwendet habe.
/* Codes */
}.
Immer wenn ich auf den Link oder das Bild klicke, wird es wieder normal. Bitte helfen Sie.
Es scheint, dass wir einen „Focus“-Code benötigen, um anzuzeigen, dass der Link ausgewählt wurde, aber Sie müssen dies für jede Seite ändern, was genau das ist, was wir vermeiden wollen.
Ich hätte auch gerne einen Code, der anzeigt, dass wir auf der angeklickten Seite sind.
zzz
Hallo
Funktioniert nicht auf iOS.
Was ist falsch?
Ich hätte viele dieser Artikel früher lesen sollen. Danke für die kurze Erklärung, warum Links in der als bewährte Praxis geltenden Reihenfolge formatiert werden sollten.
Ich habe hier endlich meine Lösung gefunden, vielen Dank. Übrigens, wie kann ich das mit einem Dropdown-Menü machen? Ist das möglich? Ich bin neu hier.
Diese :active-Sache ist in Ordnung, aber ich brauche etwas mehr, wie das Ändern der Farbe des Links, solange er aktiv ist. Hervorheben des Links nicht nur für kurze Zeit, während er angeklickt wird, sondern für eine lange Zeit.
Eine einfache Lösung, die ich gefunden habe, ist, dem HTML-Link eine Klasse namens „active“ zu geben und dann in CSS a.active mit Ihren gewählten Einstellungen zu formatieren. Erfordert, dass Sie jedem Link, den Sie bearbeiten möchten, manuell die Klasse „active“ hinzufügen.
Ihr Kommentar hier. Seien Sie cool.
55236
Für iOS verwenden Sie:
a:link { -webkit-tap-highlight-color: #aa0000; }Es funktioniert! Danke.
Für diejenigen, die nach einer Lösung für iOS fragen
Das Hinzufügen dieser JavaScript-Zeile lässt die Pseudoelemente unter iOS funktionieren.
document.addEventListener("touchstart", function() {},false);https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
Ich verstehe nicht wirklich, wie das funktioniert, aber es funktioniert. Magie!
Gute Arbeit
L :link
O
V :visited
E
H :hover
A :active
T
E
einfach gut
Vielen Dank für den Trick! Ich habe Stunden damit verbracht herauszufinden, warum mein aktiver Zustand auf meiner Seite nicht angezeigt wurde. Ich hatte .active am Ende meiner Liste! Machen Sie weiter so!
Äh. Oben auf der Liste, meine ich. lol
Wow, so einfach und doch so mächtig! Danke fürs Teilen!
Warum haben Sie das Element „Focus“ nicht einbezogen, als Vorteil gegenüber „Visited“? Ändert sich jedes Mal, wenn Sie auf einen neuen Link klicken, vermeidet die Verwirrung und lässt das aktive Element jedes Mal funktionieren, vielleicht durch die Kombination von Active und Focus erhalten Sie den Effekt der Auswahl zusätzlich zum „Hovern“ mit der Maus bei jedem neuen (nicht zuletzt verwendeten) Link…
Ich habe eine Menüliste. Die Farbe des aktiven Zustands des Listenelements wird nicht angezeigt, aber die Hintergrundfarbe wird angewendet. Was ist der Grund dafür?
Danke, dass CSS so viel Spaß macht!
Ich habe ein Portfolio-Projekt von FreeCodeCamp gemacht und bin buchstäblich zusammengebrochen, weil ich CSS nicht verstanden habe.
Ich bin so froh, dass ich diese erstaunliche Website gefunden habe.