CSS

Cursor

  • 2007-05-29 17:17
  • 0 komentarzy
  • 2289 odsłon
  • Oceń ten tekst jako pierwszy
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)

Polecenia pokrewne


  • brak

Odpowiednik html


  • brak

Wersja specyfikacji


  • CSS 2
  • CSS 2.1 - wartość progress; SVG jako format kursora
  • CSS 3 - sporo nowych właściwości

Wsparcie przeglądarek


CSS 2.1
  • Internet Explorer 5 nie obsługuje wartości progress
  • Internet Explorer 6 błędnie wyświetla kursory typu resize
  • Internet Explorer 7 nie obsługuje formatu SVG
  • Opera 9 błędnie obsługuje wartość auto (wyświetla ją tak jak default)
CSS 3
  • Gecko (Firefox) nie wyświetla tylko wartości none i context-menu ze specyfikacji CSS 3
  • Internet Explorer 6 i nowsze obsługują wartości vertical-text, not-allowed, no-drop, col-resize, row-resize, all-scroll
  • Opera 9 nie obsługuje żadnej właściwości z CSS 3