Cursor

CSS vlastnost cursor určuje vzhled kurzoru myši nad prvkem.

cursor, hodnoty z původní specifikace
hodnoty vzhled kurzoru myši
Auto Základní podoba kurzoru závislá na charakteru elementu
Crosshair Křížek na zaměřování
Default Podoba je závislá na nastavení systému. Obvykle šipka.
Hand Zastaralý způsob tvorby ručičky. Namísto hand použijte pointer.
Pointer Ručička obvykle znázorňuje klikací oblast. Funguje v Mozille, Opeře a v IE 6
Move Čtyřšipka znázorňující možnost přesunutí objektu
e-resize Kurzory pro změnu velikosti.
Písmenka na začátku vyjadřují (anglicky) směr,
kam bude šipka ukazovat.
V různých verzích operačních sytémů ten kurzor vypadá dost různě. Nespoléhejte na jeho vzhled.
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
nwse-resize
nesw-resize
text Textový kurzor ve tvaru velkého I
wait Přesýpací hodiny.
help Šipka s otazníkem značící možnost nápovědy.
url("soubor.cur") url volá soubor s příponou cur nebo ani

Vzhled kurzoru ručičky je asi nejpoužitelnější:

cursor: pointer;

Některé prvky mají přednastavenou podobu kurzoru, např. odkazy (tag <a> a <area>) mají ručičku, textové prvky mají jakoby cursor: text.

další hodnoty
hodnoty vzhled kurzoru myši
row-resize změna výšky řádku, bílá dvojšipka shora dolů
col-resize změna šířky sloupce, změna šířky sloupce
no-drop ručička s naznačením neklikatelnosti.
not-allowed přeškrtnuté kolečko, obvykle jesně červené
progress  šipka s hodinami, jako že se něco děje.
vertical-text ležatý textový kurzor vertikálního textu

Další várka hodnot začala být podporována někdy kolem roku 2014:

ještě další hodnoty
hodnoty vzhled kurzoru myši
grab objekt lze přesunout, ručička s roztaženými prsty
grabbing objekt je přesouván, ručička se sevřenými prsty
zoom-in zvětšování, lupička s pluskem
zoom-out zmenšování, lupička s mínuskem

Podpora

Podpora vlastnosti cursor
Prohlížeč Podpora Poznámka
Internet Explorer 11 nepodporuje zoom-in, zoom-out, grab, grabbing  
Firefox všechno  
Edge všechno  
Chrome všechno  
mobily pozor, mobily nemají myš, kurzory se nezobrazí  

Všimnul jsem si, že v Internet Exploreru nejde nastavit kurzor pro tag <select> (tag <select> je obecně velmi problematický, co se týká stylování).

Příklady

Nad odstavcem se bude zobrazovat kurzor přesýpacích hodin:

<p style="cursor: wait">Čekáš tu a budeš tu čekat navždy :-)</p>

Znázornění nápovědy

Častější je snaha vytvořit kurzor s otazníkem nad něčím, co má u sebe doplňující informaci (nejčastěji v atributu title):

Normální text a <span title="doplňující informace" style="cursor: help">text s vysvětlivkou</span>

V případě textu s rozšiřující informací se rozšířil zvyk nějak graficky upozornit na to, že je doplňující informace k dispozici. Obvykle se to dělá slabou šedou přerušovanou čarou pod textem (a pokud se něco dělá obvykle, mělo by se u toho zůstat). Jestliže bude takových textů v dokumentu víc, už se vyplatí udělat na to třídu. Já ji pojmenovávám class="about".

<style>
.about {border-bottom: 1px dashed grey; cursor: help}
</style>
...
Normální text a <span title="doplňující informace" class="about">text s vysvětlivkou</span>

Jako klikací oblast

Dost často je třeba nad nějakým prvkem udělat kurzor ručičku, aby uživatel věděl, že na to může kliknout. Nad odkazy se dělá ručička sama, ale v případě nějakých klikacích skriptů je potřeba přidat ručičku občas i nad něco jiného. Není v tom problém kromě toho, že Internet Explorer si ručičku pojmenoval po svém jako hand, kdežto správně (pro Mozillu a spol.) se ručička jmenuje pointer. Dá se to ale zapsat dohromady:

.klikaci {cursor: hand; cursor: pointer}

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.