HTML/CSS – Mauszeiger Cursor ändern – So gehts

Wenn dir der normale Mauszeiger zu langweilig ist, dann kannst du diesen einfach mit CSS verändern. Wie du das machst zeige ich dir in diesem Beitrag.

Mauszeiger – Cursor ändern

In folgendem Beispiel definieren wir uns einen HTML Container wo wir uns verschiedene Mauszeiger anzeigen lassen.

Cursor: Pointer

Mit pointer wird die ganz normale Hand angezeigt als würdest du auf einen Link klicken.

<div style="cursor:pointer"></div>

Ergebnis

Cursor: help

Mit help wird die Maus als Hilfesymbol angezeigt. So kannst du deinen Lesern zeigen das es sich um eine Hilfsfunktion handelt

<div style="cursor:help"></div>

Ergebnis

Cursor: move

Mit move wird die Maus ein Fadenkreuz angezeigt, somit wird gezeigt das man den Container nach oben und nach unten bewegen kann.

<div style="cursor:move"></div>

Ergebnis

Cursor: progress

Mit progress wird ein Ladesymbol als Mauszeiger angezeigt, dies zeigt das gerade noch Hintergrundberechnungen stattfinden.

<div style="cursor:progress"></div>

Ergebnis

Cursor: zoom in

Bei zoom in wird eine Lupe mit Plus Symbol als Mauszeiger angezeigt

<div style="cursor:zoom-in"></div>

Ergebnis

Cursor: zoom out

Bei zoom-out wird eine Lupe mit einem Minuszeichen als Cursor oder Mauszeiger angezeigt.

<div style="cursor:zoom-out"></div>

Ergebnis

Cursor: Crosshair

Mit crosshair wird der Mauszeiger bzw. Cursor als Fadenkreuz angezeigt.

<div style="cursor:crosshair"></div>

Ergebnis

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite