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.
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.