Ändern Sie den Cursor in einen Handzeiger in CSS

Setze cursor: pointer; für ein Element, das Nutzer aktivieren können, damit beim Darüberfahren der vertraute Handzeiger erscheint. Bei Links wird dieser Cursor häufig bereits standardmäßig verwendet; dieselbe Regel ist auch für Schaltflächen oder eigene interaktive Steuerelemente nützlich. Verwende sie, um eine Aktion zu verdeutlichen, und nicht, damit ein dekoratives Element anklickbar wirkt.

Die CSS-Eigenschaft cursor auf pointer setzen

Füge die Deklaration zum Selektor des Links, der Schaltfläche oder eines anderen interaktiven Elements hinzu. Das folgende JavaScript-Beispiel gibt die CSS-Regel für eine Schaltfläche aus, die du in ein Stylesheet übernehmen kannst. Die Ausgabe enthält den Regeltext.

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

Diese vollständige Seite zeigt die Regel außerdem im Kontext eines Links und einer Schaltfläche. Der sichtbare Text des Links, der Schaltfläche und des Abschnitts in diesem vollständigen HTML-Beispiel bleibt auf Englisch. Passe die Selektoren an dein eigenes Markup an.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

Der Wert pointer ist das CSS-Schlüsselwort für den Handzeiger. Bei einem Link mit einem gültigen href erscheint dieser Cursor normalerweise bereits standardmäßig; für gewöhnliche Links ist eine ausdrückliche Regel daher oft nicht nötig. Schaltflächen sind ebenfalls interaktive Steuerelemente. Mit der Regel erhalten sie denselben visuellen Hinweis wie Links. Reagiert ein eigenes Element auf einen Klick, ergänze den Cursorhinweis um passende Semantik und Tastaturbedienbarkeit: Der Cursor allein macht ein Element weder barrierefrei noch interaktiv.

Wähle einen Selektor, der nur Steuerelemente für tatsächliche Aktionen erfasst. Eine allgemeine button-Regel gilt beispielsweise für native Schaltflächen, während eine Klasse wie .open-panel ein einzelnes eigenes Steuerelement ansprechen kann. Weise nicht jedem Element oder Text, der nur wie ein Steuerelement aussieht, pointer zu: Der visuelle Hinweis weckt die Erwartung, dass sich das Element aktivieren lässt. Stelle die Aktion über einen Link oder eine Schaltfläche bereit und nutze die Cursorformatierung als ergänzenden Hinweis. Wenn eine andere CSS-Regel diese Deklaration überschreibt, prüfe die zutreffenden Selektoren und die Kaskade in deinem Stylesheet.

Ein benutzerdefiniertes Cursorbild mit Fallback verwenden

Wenn du statt des Standard-Handzeigers des Browsers ein Bild verwenden möchtest, setze den Wert von cursor auf url() und ergänze ein Fallback-Schlüsselwort. Mit cursor: url("/images/hand-cursor.png"), pointer; weist du den Browser beispielsweise an, /images/hand-cursor.png zu verwenden und auf pointer zurückzugreifen, falls das Bild nicht geladen oder verwendet werden kann. Lege das Bild unter diesem Pfad auf deiner Website ab oder ändere die URL in seinen tatsächlichen Speicherort. Eine relative URL in einem externen Stylesheet wird relativ zu diesem Stylesheet aufgelöst, während eine URL in Inline-CSS gegen die Basis-URL des Dokuments aufgelöst wird. Bei einem fehlenden oder falschen Pfad wird das benutzerdefinierte Bild daher nicht angezeigt; das Fallback sorgt weiterhin für den Standard-Handzeiger. Mit auto kannst du als Fallback stattdessen den üblichen Cursor des Browsers für das Element verwenden. Lass das Fallback in der Deklaration stehen, damit Nutzer auch dann einen passenden Cursor sehen, wenn das Bild nicht verfügbar ist.