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
