Cursor
CSS vlastnost cursor určuje vzhled kurzoru myši nad prvkem.
| 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.
| 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:
| 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
| 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
