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 w przykładzie użyłam ikonki Facebooka):

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

Graficzny kursor/wskaźnik myszy

Kod obrazka w miejsce wskaźnika (kursora myszy) uzyskałam z pomocą kodu: (Przykład powyżej jako pierwsza pozycja)

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 dla wyszukiwarek:

• Chrome,
• Opera,

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

• -webkit-grab
• –webkit-grabbing