CSS cursor: wszystkie wartości, własne kursory i opacity

Galeria kursorów CSS

CSS cursor: każda wartość do najechania, własne kursory, opacity | We.Inc

Najedź na kafelek każdej z 36 standardowych wartości CSS cursor, zbuduj własny kursor z obrazka z hotspotem i fallbackiem oraz dowiedz się, kiedy wygaszać elementy przez opacity, visibility lub rgba.

Właściwość cursor ustawia wskaźnik myszy widoczny nad elementem, na przykład cursor: pointer dla klikalnych elementów, not-allowed dla wyłączonych kontrolek i grab dla elementów do przeciągania. Własne kursory używają url() z obrazkiem, opcjonalnymi współrzędnymi hotspotu i obowiązkowym słowem kluczowym jako fallbackiem. Najedź na każdy kafelek poniżej, aby zobaczyć wszystkie 36 standardowych wartości w swojej przeglądarce.

Kursory, których będziesz używać najczęściej

Nazwy kursorów łatwo pomylić, a każdy system operacyjny rysuje je trochę inaczej. Ta galeria pozwala najechać na każde słowo kluczowe we własnej przeglądarce, a potem pokazuje, jak zrobić własny kursor z obrazka, który nadal elegancko wraca do fallbacku, oraz pasujące sztuczki z opacity dla stanów wygaszonych i wyłączonych.

Najczęściej zadawane pytania

Jak zrobić własny kursor w CSS?

Napisz cursor: url(cursor.svg) 4 4, auto; gdzie obrazek to mały plik PNG, SVG lub CUR, dwie liczby to hotspot w pikselach od lewego górnego rogu, a auto to słowo kluczowe użyte jako fallback, jeśli obrazek się nie wczyta. Przed słowem kluczowym możesz podać kilka obrazków url().

Jaki kursor powinien pokazywać wyłączony przycisk?

Zwykle wybiera się not-allowed. Ustaw go przez button:disabled { cursor: not-allowed; opacity: 0.5; } i zachowaj prawdziwy atrybut disabled, aby informacja o niedostępnej kontrolce trafiła także do użytkowników klawiatury i czytników ekranu, a nie tylko myszy.

Czym różni się opacity od visibility?

opacity wygasza cały element razem z dziećmi, a w pełni przezroczysty element nadal odbiera kliknięcia i fokus. visibility: hidden wyłącza element zarówno dla wskaźnika, jak i technologii asystujących, zachowując jego miejsce. Użyj opacity do samego wygaszania, a na końcu przełącz visibility, aby niewidocznych elementów nie dało się kliknąć.

Dlaczego opacity robi przezroczystym także mój tekst?

opacity działa na wszystko wewnątrz elementu. Aby prześwitywało tylko tło, użyj półprzezroczystego koloru: background-color: rgb(0 0 0 / 0.5) albo starszego rgba(0, 0, 0, 0.5). Tekst pozostaje w pełni nieprzezroczysty.

Czy mogę ukryć kursor?

cursor: none ukrywa go nad elementem, czego czasem potrzebują gry, kioski i odtwarzacze wideo. Na zwykłych stronach używaj tego oszczędnie, bo ludzie tracą orientację, gdzie wskazują.

Kursory to podpowiedzi, a nie kontrolki

Własne kursory z obrazka, które się nie psują

Poprawne wygaszanie elementów

Wszystkie 36 wartości cursor

Standardowe słowa kluczowe kursora (CSS Basic User Interface Level 4); klasy Tailwind to cursor-<value>

Własny kursor z hotspotem i fallbackiem

Wbudowany kursor SVG w kształcie pierścienia, wyśrodkowany na hotspocie

Hotspot 12 12 umieszcza kliknięcie w środku pierścienia. Jeśli obrazek nie zostanie przyjęty, użyty zostanie crosshair.

Stany wyłączenia, przeciągania i zmiany rozmiaru

Kursory pasujące do interakcji

Najedź na każdy element. Karta do przeciągania przełącza się na grabbing, gdy przycisk myszy jest wciśnięty.

opacity a visibility a rgba

Jak wybrać sposób wygaszania

opacity całego elementu obok półprzezroczystego tła

Lewy baner wygasza tekst razem z ramką. Prawy zachowuje ostry tekst na prześwitującym tle.

Wszystkie

Ogólne

Linki i status

Zaznaczanie

Przeciągnij i upuść

Zmiana rozmiaru i przewijanie

Powiększenie

Galeria do najechania

Filtruj grupę kursorów

Skopiowano

Kliknij, aby skopiować

Skopiowano kursor: {v}

Kreator własnego kursora

Przetestuj kursor tutaj

Rozmiar obrazka: {n}px

Hotspot x: {n}px

Hotspot y: {n}px

Słowo kluczowe fallbacku

Kopiuj CSS

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony