Cursor
cursor - definiuje wygląd kursora.
Możliwe wartości (najedź na podkreślony tekst aby zobaczyć efekt):
- auto - wartość domyślna; niczego nie wymusza; kursor dostosowuje się do tego czy znajduje się nad tekstem, czy nad tłem elementu
- crosshair - krzyżyk
- default - domyślny kursor (najczęściej strzałka)
- pointer - wskaźnik wskazuje odsyłacz
- move - przesuwanie
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize - różne warianty kursora oznaczającego zmianę rozmiaru
- text - kursor z nad tekstu
- wait - zajęty
- progress - postęp
- help - pomoc (najczęściej strzałka ze znakiem zapytania)
- URI - kursor wczytany z pliku, w formacie SVG, CUR lub ANI (zobacz niżej); działa też na systemach Linuksowych
- Inherit - przejęcie wartości rodzica
Przykład użycia:
acronym
{
cursor: help;
}
Przy wczytywaniu kursora z pliku, musi zostać też podany rodzaj kursora, który zostanie wyświetlony jeżeli nie będzie można odnaleźć pliku. Można też wymienić kilka plików po przecinku, aby ustrzec się przed przeglądarkami które mogą nie obsługiwać danego rodzaju pliku.
acronym
{
/* przeglądarka która nie obsługuje SVG, wyświetli plik CUR, jeśli tego też nie będzie w stanie wyświetlić, użyty zostanie kursor "help" */
cursor: url('cursor.svg'), url('cursor.cur'), help;
}
Ścieżkę do pliku podaje się względem dokumentu HTML, a nie arkusza stylów!
Zmiany w CSS 3
Wartości x i y przy kursorze wczytanym z pliku określają miejsce aktywne (ang. hotspot) kursora (domyślnie 0 0), np:acronym
{
cursor: url('cursor.svg') 3 1, help;
}
- none - brak kursora
- context-menu - element z menu kontekstowym (powinna być to strzałka z dorysowanym małym menu)
- cell - oznacza że dana komórka lub zestaw komórek może zostać zaznaczony (powinien być to gruby krzyżyk)
- vertical-text - oznacza że może zostać zaznaczony poziomy tekst (powinien wyglądać jak zwykły kursor text tyle, że poziomy)
- alias - oznacza przezwisko, czy skrót (strzałka z drugą, mniejszą i krzywą strzałką)
- copy - coś co może być skopiowane (strzałka z plusikiem)
- no-drop - oznacza że podniesiony element nie może zostać tu wyrzucony (przekreślone kółko)
- not-allowed - oznacza, że akcja nie może zostać tu wykonana (przekreślone kółko)
- ew-resize, ns-resize, nesw-resize, nwse-resize - cztery dodatkowe warianty zmiany rozmiaru
- col-resize - zmiana rozmiaru kolumny (strzałki skierowane w lewo i prawo rozdzielone separatorem)
- row-resize - zmiana rozmiaru wiersza (strzałki skierowane w górę i w dół rozdzielone separatorem)
- all-scroll - coś może być przesunięte w każdą stronę (strzałka skierowana we wszystkie strony)