cursor
Ustawia wygląd kursora myszy nad elementem.
- Wartość domyślna
auto- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.cursor = "pointer"
Przykład
#.card[role="button"] {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}<div style="display: flex; gap: 10px;">
<button type="button" style="padding: 8px 14px; cursor: pointer;">Aktywny</button>
<button type="button" disabled style="padding: 8px 14px; cursor: not-allowed;">Zablokowany</button>
</div>Definicja i zastosowanie
#Właściwość cursor zmienia kształt kursora, gdy wskaźnik znajduje się nad elementem. Kursor to ważna wskazówka: rączka (pointer) mówi „tu można kliknąć”, kreska (text) „tu można zaznaczyć tekst”, a przekreślone kółko (not-allowed) „ta akcja jest niedostępna”.
Przyciski i linki mają odpowiednie kursory domyślnie. Własny kursor warto ustawić dla elementów, które zachowują się jak przyciski, ale nimi nie są, oraz dla specjalnych stref, na przykład przeciągania (grab, grabbing).
Możesz też użyć własnego obrazka: cursor: url(kursor.png) 4 4, auto. Liczby to punkt aktywny obrazka, a po przecinku podajesz kursor zapasowy.
Składnia
#cursor: auto | default | pointer | text | move | grab | not-allowed | wait | help | … | url(…) x y, <kursor>;Wartości
#Wartości w praktyce
#pointer
.demo { cursor: pointer; }text
.demo { cursor: text; }grab
.demo { cursor: grab; }not-allowed
.demo { cursor: not-allowed; }wait
.demo { cursor: wait; }zoom-in
.demo { cursor: zoom-in; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie zmieniaj kursora na
pointerw elementach, które nic nie robią po kliknięciu. To mylące. - Na ekranach dotykowych kursora nie ma, więc nie przekazuj za jego pomocą ważnych informacji.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.