HTML/CSS – Mauszeiger Cursor ändern – So gehts

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

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 Bereich

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 Bereich

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 Bereich

Cursor: progress

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

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

Ergebnis

Cursor Bereich

Cursor: zoom in

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

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

Ergebnis

Cursor Bereich

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 Bereich

Cursor: Crosshair

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

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

Ergebnis

Cursor Bereich


Das könnte dich interessieren!


Weitere Kategorien






Schreibe einen Kommentar



35005