CSS-Cursor-Generator

Die CSS-Eigenschaft cursor steuert den visuellen Indikator, der angezeigt wird, wenn Ihre Maus über einem Element auf einer Webseite positioniert ist. Dieses subtile, aber leistungsstarke Designwerkzeug teilt den Benutzern Interaktivität mit und signalisiert, ob sie auf verschiedene Teile Ihrer Benutzeroberfläche klicken, ziehen, ändern oder interagieren können. Unabhängig davon, ob Sie eine Webanwendung erstellen oder eine einfache Website gestalten, hat die Wahl des richtigen Cursor-Typs einen großen Einfluss auf die Benutzererfahrung und die wahrgenommene Professionalität.

Dieser Generator zeigt alle standardmäßigen CSS-Cursor-Werte, organisiert nach Kategorie — von allgemeinen Cursor-Typen wie default und none bis hin zu spezialisierten Typen für Links, Textauswahl, Ziehen und Ablegen, Größenänderung und Zoomen. Durchsuchen Sie einfach die Kategorien, halten Sie den Mauszeiger über jeden Cursor-Typ, um eine Live-Vorschau zu sehen, wie er auf dem Bildschirm angezeigt wird, und klicken Sie, um die einsatzbereite CSS-Deklaration (cursor: value;) in die Zwischenablage zu kopieren. Dieser Arbeitsablauf macht es überflüssig, Syntaxregeln zu merken oder in der Dokumentation nachzuschlagen.

Häufige Anwendungsfälle sind das Markieren deaktivierter Formularelemente mit not-allowed, das Anzeigen von grab- und grabbing-Cursor-Typen für ziehbare Komponenten und die Verwendung von Größenänderungs-Cursor-Typen wie col-resize oder row-resize zur Kennzeichnung größenänderungsfähiger Grenzen. Moderne Browser unterstützen alle diese Cursor-Werte ohne zusätzliche Konfiguration und bieten damit eine zugängliche Möglichkeit, die Benutzerfreundlichkeit auf Desktop- und Touchscreen-Schnittstellen zu verbessern.