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

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):

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://aurainweb.pl/wp-content/uploads/2019/10/facebook-1.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

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

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago