Autor publikacji
Virtual Patriot - Administrator

cursor

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości cursor

Za pomocą właściwości cursor możemy określić typ kursora interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości cursor

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

auto

wyjątki initial

label, select

animowanie

tak (animacja schodkowa)

Interpretacja właściwości cursor

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje wartość alias, copy, context-menu, cell, ns-resize, ew-resize, nesw-resize oraz nwse-resize, lecz od wersji "9".

Nie interpretuje wartości zoom-in, zoom-out, grab, grabbing oraz wartości składnika coords.

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości cursor

typ kursora

Wyjaśnienie

Za pomocą właściwości cursor oraz dowolnej dostępnej wartości typu kursora możemy określić typ kursora interesującego nas elementu HTML.

Dostępne wartości typu kursora

auto

Typ auto oznacza, że przeglądarka internetowa sama powinna zdecydować o typie kursora.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "auto"
pointer

Typ pointer sugeruje, że dana treść może zostać kliknięta w celu wykonania dodatkowej akcji.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "pointer"
progress

Typ progress sugeruje, że dany program wykonuje pewną dodatkową czynność, lecz nie przeszkadza to w dalszej interakcji z danym programem.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "progress"
wait

Typ wait sugeruje, że należy zaczekać z dalszą interakcją z danym programem, ponieważ dany program wykonuje pewną dodatkową czynność, która musi zostać ukończona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "wait"
crosshair

Typ crosshair oznacza kursor w postaci prostego celownika.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "crosshair"
move

Typ move sugeruje, że dany element HTML może zostać przeniesiony w dowolnym kierunku.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "move"
help

Typ help sugeruje, że dla danej treści jest dostępna dodatkowa pomocnicza treść znajdująca się pod danym kursorem.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "help"
text

Typ text sugeruje, że dany tekst może zostać zaznaczony (postać kursora zmienia się w zależności od tego czy dany tekst jest tekstem poziomym czy tekstem pionowym).

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "text"
vertical-text

Typ vertical-text sugeruje, że dany tekst może zostać zaznaczony (postać kursora wskazuje na tekst pionowy).

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "vertical-text"
alias

Typ alias sugeruje, że może zostać utworzony alias danej treści.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "alias"
copy

Typ copy sugeruje, że dana treść może zostać skopiowana.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "copy"
all-scroll

Typ all-scroll sugeruje, że dana treść może zostać przewinięta w dowolnym kierunku.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "all-scroll"
context-menu

Typ context-menu sugeruje, że dla danej treści jest dostępne dodatkowe menu znajdujące się pod danym kursorem.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "context-menu"
cell

Typ cell sugeruje, że dana komórka lub dana grupa komórek może zostać zaznaczona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "cell"
col-resize

Typ col-resize sugeruje, że poziomy rozmiar danej kolumny może zostać zmieniony.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "col-resize"
row-resize

Typ row-resize sugeruje, że pionowy rozmiar danego wiersza może zostać zmieniony.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "row-resize"
not-allowed

Typ not-allowed sugeruje, że żądana akcja jest zabroniona i nie zostanie wykonana.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "not-allowed"
zoom-in

Typ zoom-in sugeruje, że dana treść może zostać przybliżona do naszego wzroku.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "zoom-in"
zoom-out

Typ zoom-out sugeruje, że dana treść może zostać oddalona od naszego wzroku.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "zoom-out"
grab

Typ grab sugeruje, że dany element HTML może zostać chwycony w celu przeciągnięcia i upuszczenia w inne miejsce.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "grab"
grabbing

Typ grabbing oznacza, że dany element HTML został i ciągle jest chwycony w celu przeciągnięcia i upuszczenia w inne miejsce.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "grabbing"
no-drop

Typ no-drop sugeruje, że dany element HTML nie może zostać upuszczony w danym miejscu.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "no-drop"
none

Typ none oznacza, że kursor danego elementu HTML nie powinien zostać wyświetlony.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "none"
n-resize

Typ n-resize sugeruje, że pozycja północnej (górnej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "n-resize"
e-resize

Typ e-resize sugeruje, że pozycja wschodniej (prawej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "e-resize"
s-resize

Typ s-resize sugeruje, że pozycja południowej (dolnej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "s-resize"
w-resize

Typ w-resize sugeruje, że pozycja zachodniej (lewej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "w-resize"
ne-resize

Typ ne-resize sugeruje, że pozycja północno-wschodniego (prawego górnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "ne-resize"
se-resize

Typ se-resize sugeruje, że pozycja południowo-wschodniego (prawego dolnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "se-resize"
sw-resize

Typ sw-resize sugeruje, że pozycja południowo-zachodniego (lewego dolnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "sw-resize"
nw-resize

Typ nw-resize sugeruje, że pozycja północno-zachodniego (lewego górnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "nw-resize"
ns-resize

Typ ns-resize sugeruje, że pozycja północnej (górnej) krawędzi danego elementu HTML oraz pozycja południowej (dolnej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "ns-resize"
ew-resize

Typ ew-resize sugeruje, że pozycja wschodniej (prawej) krawędzi danego elementu HTML oraz pozycja zachodniej (lewej) krawędzi danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "ew-resize"
nesw-resize

Typ nesw-resize sugeruje, że pozycja północno-wschodniego (prawego górnego) rogu danego elementu HTML oraz pozycja południowo-zachodniego (lewego dolnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "nesw-resize"
nwse-resize

Typ nwse-resize sugeruje, że pozycja północno-zachodniego (lewego górnego) rogu danego elementu HTML oraz pozycja południowo-wschodniego (prawego dolnego) rogu danego elementu HTML może zostać zmieniona.

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "nwse-resize"
default

Typ default oznacza, że powinien zostać wyświetlony kursor, który jest kursorem domyślnym dla danego urządzenia, systemu lub platformy (najczęściej kursorem tym jest kursor w postaci strzałki).

najedź kursorem myszy na obszar tego elementu HTML, aby zobaczyć kursor typu "default"

Przykład

  cursor:pointer;
kursor tego elementu "div" jest typu "pointer", ponieważ do tego elementu "div" została dodana właściwość "cursor" wraz z wartością "pointer"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        cursor:pointer;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      kursor tego elementu "div" jest typu "pointer", ponieważ do tego elementu "div" została dodana właściwość "cursor" wraz z wartością "pointer"
    </div>

  </body>
</html>

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości cursor oraz z góry zdefiniowanego wzorca wartości możemy określić typ kursora interesującego nas elementu HTML.

Składniki wzorca wartości właściwości cursor

Ważne

możemy podać więcej oddzielonych od siebie dokładnie jednym znakiem przecinka par składników image coords

Przykładowe zapisy

pointer

url(kursor-1.cur), move

url(kursor-1.cur) 2 4, move

url(kursor-1.png) 5 2.5, move

url(kursor-1.cur), url(kursor-1.png), move

url(kursor-1.cur), url(kursor-1.png) 5 5, move

image

Składnik image nie jest wymaganym składnikiem wzorca wartości właściwości cursor. Składnik image określa, który obrazek powinien stanowić kursor obrazkowy interesującego nas elementu HTML.

Dostępne wartości

funkcja url()

Sposób podawania

za pomocą funkcji url() należy wskazać adres obrazka, który chcemy, aby stanowił kursor obrazkowy elementu HTML

Obsługiwane formaty

.png, .svg, .ico, .cur oraz każdy inny nieanimowany format, który może zostać obsłużony przez funkcję url() właściwości background-image

Wartość domyślna

brak

coords

Składnik coords nie jest wymaganym składnikiem wzorca wartości właściwości cursor. Składnik coords określa pozycję początkową obrazka stanowiącego kursor obrazkowy.

Dostępne wartości

dowolna nieujemna liczba

Zakres wartości

pierwsza wartość składnika coords nie może być większa niż rozmiar szerokości obrazka stanowiącego kursor obrazkowy, natomiast druga wartość składnika coords nie może być większa niż rozmiar wysokości obrazka stanowiącego kursor obrazkowy

Sposób podawania

należy podać dokładnie dwie wartości, oddzielone od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Pierwsza wartość składnika coords przesuwa w lewo od punktu 0 0 obrazek stanowiący kursor obrazkowy. Druga wartość składnika coords przesuwa w górę od punktu 0 0 obrazek stanowiący kursor obrazkowy. Ponadto ewentualną wartość składnika coords należy podać tylko wtedy, gdy zdecydowaliśmy się podać wartość składnika image.

Ważne

obie podane przez nas wartości składnika coords zostaną potraktowane przez przeglądarkę internetową jako wartości wyrażone w pikselach

Wartość domyślna

0 0 (wskazuje na lewy górny róg obrazka stanowiącego kursor obrazkowy)

fallback

Składnik fallback jest wymaganym składnikiem wzorca wartości właściwości cursor. Składnik fallback określa typ kursora, który powinien zastąpić kursor, na który wskazuje wartość składnika image. Mowa tu o sytuacji, gdy nie podaliśmy wartości składnika image lub gdy podana przez nas wartość składnika image nie może zostać obsłużona przez przeglądarkę internetową.

Dostępne wartości

dowolna dostępna wartość typu kursora

Wartość domyślna

brak

Przykład

  cursor:url(https://webkod.pl/files/css/kursor.cur), auto;
obrazkiem stanowiącym kursor obrazkowy tego elementu "div" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/kursor.cur", natomiast kursorem zastępczym kursora obrazkowego tego elementu "div" jest kursor typu "auto", ponieważ do tego elementu "div" została dodana właściwość "cursor" wraz z następującymi wartościami: "url(https://webkod.pl/files/css/kursor.cur), auto"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        cursor:url(https://webkod.pl/files/css/kursor.cur), auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem stanowiącym kursor obrazkowy tego elementu "div" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/kursor.cur", natomiast kursorem zastępczym kursora obrazkowego tego elementu "div" jest kursor typu "auto", ponieważ do tego elementu "div" została dodana właściwość "cursor" wraz z następującymi wartościami: "url(https://webkod.pl/files/css/kursor.cur), auto"
    </div>

  </body>
</html>