hover, visited, focus, link – CSS Pseudoklassen für Links

Elemente ohne spezielles HTML: Zustände von Links

Seit den Anfangstagen von HTML verwenden die Browser standardmäßig vier Hauptzustände für Links, die am besten in der dieser Reihenfolge angeben werden: Link → Visited → Hover → Active (LVHA-Regel).

Pseudo-Klassen entstehen bei Phantom-Zuständen eines Elements, meist durch Benutzeraktionen, aber auch bei bestimmten Sprachen und basieren auf Informationen außerhalb des DOM-Baums. Pseudo-Klassen können an beliebigen Stellen der Selektor-Kette stehen (ein Pseudo-Element wie ::before oder ::after hingegen nicht).

Pseudo-Klassen ansprechen

Im HTML-Code können diese Elemente gar nicht erreicht werden, denn es gibt kein HTML-Tag für „beim Hovern“ oder „hier warst du schon mal“. Also kann die Darstellung nicht durch ein style-Attribut beeinflusst werden.

a:link { text-decoration: none; color: purple; }

a:link { text-decoration: none; color: purple; }

a:visited { text-decoration: none; color: purple; }

a:active { background-color: #8FBC8F }

li:hover { background-color: #8FBC8F }

input:focus { background-color: lavender }

Pseudo-Klassen für Links: die LVHA-Regel

Link-Pseudo-Klassen fangen die Zustände eines Links ab: Maus liegt über dem Link, Link wurde schon besucht. Diese CSS-Eigenschaften wurden schon früh von allen Browsern unterstützt.

• normaler Link (a:link) → blau (#0000EE)
• besuchter Link (a:visited) → violett (#551A8B)
• aktiver Link (a:active) → rot (#FF0000)
• hover → kein fester Standard, aber de facto ein helleres Blau oder unterstrichen
• focus → wird von Browsern nativ durch einen Focus Ring (oft blau, manchmal gestrichelt) hervorgehoben; keine fixierte Farbe im Standard

2023 sind die Systemfarben hinzugekommen und werden von den modernen Browsern zuverlässig unterstützt. Diese Farben passen sich automatisch an das Erscheinungsbild an: Light Mode, Dark Mode.

CSS2 erlaubt eine weitere Differenzierung, bei der die Pseudo-Klassen hintereinander geschaltet sind.

a:visited:hover { background-color: gray; color: white }

Die Reihenfolge der Pseudo-Selektoren muss wie hier :link, :visited, :hover, :focus, :active sein (LVHA-Regel). Ansonsten überschreibt z.B. :visited den Selektor :hover.

Tap statt Hover für Touchscreens

Ein :hover-Selektor sollte nicht ohne Weiteres für wichtige Aktionen eingesetzt werden, denn auf Smartphones und Tabletts gibt es kein :hover. Deshalb erkennt der Nutzer oft nicht, dass ein Bild interaktiv ist. Der Finger toucht ein Element oder tippt es doppelt – aber es gibt kein Überstreichen wie mit der Maus.

Tabletts und Smartphones übersetzen ein hover über einem Link direkt in einen Mausklick.

Wenn :hover für Animationen eingesetzt wird – z.B. einen Link anzeigen, wenn die Maus über einem Bild hovert –, kann Javascript den Effekt beim Berühren des Elements für Touchscreens nachziehen. Dann sind Javascript-Events wie ontouchstart und ontouchend das Äquivalent zum Hovern mit der Maus oder – die moderneren und flexibleren Javascript Pointer-Events.

Da heute Besucher mit den Touchscreen überwiegen, kann man überlegen, wie sinnvoll der Einsatz von :hover überhaupt noch ist und lieber sowohl für Desktop als auch für den Touchscreen der mobilen Geräte ein Tap einsetzen. Mit einem Tap kann der Benutzer auch steuern, welcher Teil des Bildes des Bildes gezoomt werden soll.

.tap-zoom {
  position: relative;
  overflow: hidden;
  cursor: zoom-icon;
}

.tap-zoom img {
  width: 100%;
  height: auto;
  transition: transform .35s ease;
  transform-origin: center;
}

.tap-zoom.zoomed img {
  transform: scale(2);
}

🔍

Für das tap-zoom ist ein kleines Stück Javascript zuständig. 13 Zeilen – überschaubar.

document.querySelectorAll(".tap-zoom").forEach(el => {
	let zoomed = false
	el.addEventListener("click", e => {

		zoomed = !zoomed;
		el.classList.toggle("zoomed", zoomed);

   	 if (zoomed) {
			const rect = el.getBoundingClientRect();

			const x = (e.clientX - rect.left) / rect.width * 100;
			const y = (e.clientY - rect.top) / rect.height * 100;

			el.querySelector("img").style.transformOrigin = `${x}% ${y}%`;
		}
  	});
});

getBoundingClientRect liefert die Position (top, left, bottom, right) sowie Breite und Höhe eines Elements im Browserfenster / Viewport.

hover – nicht nur bei Links

Früher unterstützten die meisten Browser das Ändern einer CSS-Eigenschaft beim Hovern mit der Maus nur bei a-Tags. Heute klappt es auch mit anderen HTML-Elementen: Listen, Tabellenzellen und Texte in Absätzen.

@media (max-width:360px) {
	td:nth-child(3) { display:none}
}
tr:nth-child(odd) {background: gainsboro;}
tr:hover { background: ivory}

So erhalten z.B. Tabellenzeilen mit tr : hover einen farbigen Hintergrund, wenn die Maus über ihnen hovert und die Navigationsleiste zeig ein Pull-Down oder – wie hier – ein Fly-Out-Menü.

Aber wie oben unter Die hover-Falle: Auf dem Touchscreen – dem Tablett und dem Smartphone – gibt es kein :hover.

Eine Navigation darf darum nicht mehr ohne Erkennung von Touch Devices auf :hover beruhen. Ein responsives Menü für die Navigation kann ohne Javascript, nur mit HTML und CSS animiert werden.

ul.col ul { 
   display: none
}
ul.col li:hover ul {
   list-style: none;
   display: block; position: absolute;
   left: 14em; z-index: 10; margin-top: -2em;
   width: 12em
}

So kommen wir dann mit CSS an eine aufpoppende Navigation ganz ohne Javascript. Das funktioniert auch in Internet Explorer.

any-link

any-link wirkt auf linkende Elemente (Elemente mit einem href-Attribut), egal, ob der Link schon besucht oder noch nicht besucht wurde.

Stile für :any-link wirken z.B. auch, wenn ein a-Element einen Block von Elementen umspannt: Mit HTML5 darf ein a-Tag um ein oder mehrere Block-Elemente gelegt werden.

<a href="/tutorial/css-tabs.html">
    <h4>CSS Tabs ohne Javascript</h4>
    <p>Tabs nur mit HTML input, … </p>
</a>

:focus

Focus wird anders behandelt als die Link-Zustände. Die Pseudoklasse :focus entdeckt, ob ein Feld aktiviert ist – entweder durch einen Klick mit der Maus in das Feld oder durch eine Navigation mit dem Tabulator der Tastatur. Es gibt keine vorgegebene FokusText-Farbe, sondern einen Fokus-Ring – das Feld wird durch einen besonderen Rahmen markiert (outline)

input#name:focus { background-color: Highlight }

focus mit Attribut-Selektor

input[type="password"]:focus { background-color: Highlight }

Wenn das Eingabefeld in den Fokus kommt, wird es farbig hinterlegt.

Pseudo-Klassen vs Pseudo-Elemente (einfacher oder doppelter Doppelpunkt)

Pseudo-Elemente sprechen Teile eines Elements ohne HTML-Markup an, z.B. die erste Zeile eines Absatzes (::firstLine) und können Elemente ohne HTML-Markup einfügen (::before, ::after) oder einfach nur stylen (::marker – die Marker-Box von Listen). Sie können nicht inline in einem style-Attribut vereinbart werden und nur am Ende der Selektor-Kette stehen.

Sowohl Pseudo-Klassen als auch Pseudo-Elemente können nicht inline in das HTML-Element gesetzt werden – denken wir einmal an ein hover.

Pseudo-Klassen werden durch einen Doppelpunkt vom Selektor getrennt: a:hover oder li.activeItem:hover. Dabei darf kein Leerzeichen zwischen dem Element und dem Doppelpunkt stehen.

:hover und :focus sind dynamische Pseudo-Klassen, mit denen CSS auf Benutzeraktionen wie das Hovern mit der Maus und die Wahl eines Eingabefeldes mit dem Cursor oder Tastatur durch Ändern des Aussehen reagiert. :hover und :focus triggern auch einfache Animationen durch CSS transition.