WebDev.wiki > CSS > CSS vlastnosti a hodnoty > cursor

cursor

Definice a použití

CSS vlastnost cursor definuje vzhled kurzoru myši při najetí na daný prvek nebo element.

CSS syntaxe

cursor: cursor;

Hodnoty vstupů	Popis	Hodnota
cursor	definuje vzhled kurzoru po najetí na prvek	auto alias all-scroll cell context-menu copy crosshair grab help move none pointer progress text url vertical-text wait zoom-in zoom-out col-resize

auto - výchozí hodnota, vykreslena základní podoba kurzoru závislá na charakteru elementu
alias - vykreslení kurzoru, když je něco vytvářeno
all-scroll - vykreslení kurzoru, když může být něco scrolováno ve všech směrech
cell - vykreslení kurzoru, když může být vybrána buňka nebo jejich skupina
context-menu - vykreslení kurzoru, když je dostupné kontextové menu
copy - vykreslení kurzoru, když může být prvek kopírován
crosshair - vykreslení kurzoru jako zaměřovacího kříže
grab - vykreslení kurzoru pokud může být prvek chycen
help - vykreslení kurzoru se znakem otazníku jako symbol nápovědy
move - vykreslení kurzoru (čtyřšipka) pokud může být prvek přesunut
none - kurzor nebude vykreslen po najetí na daný prvek
pointer - vykreslení kurzoru, ukázka aktivního prvku (výchozí vzhled odkazu)
progress - vykreslení kurzoru, pokud je program zaneprázdněn (něco probíhá)
text - vykreslení kurzoru ve tvaru velkého I (výchozí vzhled při najetí na text)
url - vykreslení kurzoru z externího zdroje, url volá soubor s příponou cur nebo ani
vertical-text - vykreslení kurzoru ve tvaru velkého I, ale otočeného o 90°
wait - vykreslení kurzoru v podobě přesýpacích hodin
zoom-in - vykreslení kurzoru jako lupy kde může být něco zvětšeno
zoom-out - vykreslení kurzoru jako lupy kde může být něco zmenšeno
col-resize - vykreslení kurzoru v podobě změny šířky sloupce

Dále ještě exitují e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize, které určují kam bude šipka kurzoru ukazovat, písmena na začátku určují směr (anglicky) kam bude šipka kurzoru ukazovat. V různých verzích operačních systémů tento kurzor vypadá velmi odlišně, což je potřeba brát v potaz při jeho používání.

Výsledná podoba kurzoru je vždy závislá na nastavení operačního systému potažmo prohlížeče, jaký uživatel používá. Toto platí vždy kromě použití URL.

Ukázka:

CSS

/* Po najetí na element kurzorem myši se změní na symbol pro nápovědu */
span.help {
   cursor: help;
}

Použité vlastnosti: cursor

HTML

<span class="help">Po najetí kurzem myši na tento text se jeho vzhled změní.</span>

Použité tagy: <span>

Výsledek:

Po najetí kurzem myši na tento text se jeho vzhled změní.

Tip1 Nejčastěji se používá cursor:pointer pro zvýraznění prvku nebo elementu při najetí na něj.

Podpora webových prohlížečů

Firefoxano

Internet Explorerano

Google Chromeano

Safariano

Operaano