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 systému Windows 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
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ší. Protože IE5 neumějí hodnotu cursor: pointer, ale cursor: hand, zadává se prvku, nad kterým má být ručička, styl:

cursor: pointer; cursor: hand

(v tomto pořadí) bude se to pak chovat správně ve všech prohlížečích. 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 cursor pro Internet Explorer 6 a Mozillu
hodnoty vzhled kurzoru myši
all-scroll skrolovací kurzor, který se někdy objevuje po stisku prostředního tlačítka. Firefox implementuje jako hodnotu move.
col-resize jako změna šířky sloupce
no-drop ručička s naznačením neklikatelnosti. Firefox implementuje jako hodnotu not-allowed.
not-allowed přeškrtnuté kolečko
progress  šipka s hodinami, jako že se něco děje. Podporuje i Opera.
row-resize  změna výšky řádku
vertical-text ležatý textový kurzor vertikálního textu

Podpora

Podpora vlastnosti cursor
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 4, 5, 5.5, 6 IE podporuje nestandardní hodnotu hand
Firefox všechny verze odlišná implementace no-drop a all-scroll
Opera 7 + Pouze hodnoty z horní tabulky (původní specifikace) a hodnotu progress
Chrome ano  

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, webhosting s doménou v ceně. 20GB
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.