kursy tutoriale

Jak zmienić kształt kursora (wskaźnika) myszy na stronie? [CSS]

Czas czytania: < 1 minut

Czasami w celu uatrakcyjnienia lub usprawnienia działania witryny internetowej chcemy zmienić kształty kursora (wskaźnika) myszy.

Chodzi np. o sytuację kiedy chcemy by miał on inny nie standardowy kształt. Czyli w zależności od tego w jakim miejscu go umieścimy np. rączki z wyciągniętym palcem nad linkiem. Jeżeli w tym monecie myślisz, że potrzebujesz do tego JavaScript to jesteś w błędzie. Do zmiany wyglądu wystarczy nam bowiem sam CSS.

A my jedynie musimy wybrać odpowiednie ustawienie właściwości cursor.

Zastosowanie właściwości cursor

Poniżej znajduje się bardzo prosta lista na której możecie samodzielnie przetestować działanie konkretnego ustawienia właściwości. Deklaracja w CSS jest bardzo prosta np.

    cursor: help;
    cursor: row-resize;

A tak prezentuje się to w praktyce (przykład 1 – to wskaźnik obrazkowy, czyli grafika w miejsce wskaźnika):

See the Pen
Cursors CSS
by Aura (@Julka85)
on CodePen.

 

Graficzny kursor/wskaźnik myszy

Kod obrazka w miejsce wskaźnika (kursora myszy) uzyskałam z pomocą kodu:

cursor: url('https://www.aurainweb.pl/wp-content/uploads/2019/10/facebook.jpg'), pointer;

Własność ta jest obsługiwana przez wszystkie przeglądarki trzeba pamiętać jedynie o przedrostku:

Chrome, Opera:
Wymagany przedrostek to -webkit- dla wartości grab oraz grabbing, czyli -webkit-grab oraz -webkit-grabbing