- 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
- wyjątki initial
- animowanie
-
tak (animacja schodkowa)
Interpretacja właściwości cursor
-
tak
-
tak
-
tak
-
tak
-
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.
-
tak
Zobacz więcej informacji o interpretacji właściwości cursor.
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;
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ścicursor
. Składnikimage
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ścicursor
. Składnikcoords
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ładnikacoords
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 punktu0 0
obrazek stanowiący kursor obrazkowy. Druga wartość składnikacoords
przesuwa w górę od punktu0 0
obrazek stanowiący kursor obrazkowy. Ponadto ewentualną wartość składnikacoords
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ścicursor
. Składnikfallback
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;
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>