Co jsou kurzory v CSS?
Každý den již používáme přizpůsobené kurzory. Tato interakce je možná pomocí upravených kurzorů, například když najedete na tlačítka, kurzor se změní na ruku nebo když najedete na text a kurzor se změní na textový kurzor.
Kurzory však mohou být také použity k tomu, abychom našim uživatelům poskytli různé další kreativní příležitosti.
Než začneme s vývojem vlastních kurzorů, měli bychom si být vědomi toho, že CSS již má výchozí kurzory pro různé často prováděné akce.
Tyto kurzory poskytují možnosti akce na přesném místě, nad kterým se pohybujete. Příklady zahrnují kurzory, které označují, že byste měli klikat na odkazy, přetahovat prvky, přibližovat a oddalovat objekty a další.
Pomocí vlastnosti kurzoru CSS popište požadovaný druh kurzoru.
Vlastnost kurzoru CSS
Pomocí vlastnosti kurzoru CSS můžeme určit druh kurzoru, který se má uživateli zobrazit.
Užitečnou aplikací této funkce je použití fotografií jako tlačítek pro odeslání na formulářích. Ve výchozím nastavení se místo ukazatele zobrazí ruka, když je kurzor nad odkazem. Tlačítko Odeslat formulář však nezpůsobí změnu formuláře. To slouží jako vizuální vodítko, že na obrázek lze kliknout, kdykoli někdo najede myší na obrázek, který je tlačítkem pro odeslání.
Tato vlastnost je určena nulou nebo více hodnotami oddělenými čárkami, za nimiž podle potřeby následuje jedna hodnota klíčového slova a každá bude odkazovat na soubor obrázku.
Syntax
cursor: value;
Hodnoty vlastností
| Auto: | Výchozí nastavení pro tento atribut je umístit kurzor.
| Přezdívka: | Tento atribut se používá k zobrazení indikátoru souvisejícího s vytvořením kurzoru.
| Posunout vše: | Kurzor v tomto atributu označuje rolování.
| Buňka: | Kurzor v této vlastnosti označuje, že je aktuálně vybrána buňka nebo skupina buněk.
| Kontextová nabídka: | Kurzor v tomto atributu ukazuje přítomnost kontextové nabídky.
| Velikost sloupce: | Když je kurzor nad sloupcem v této vlastnosti, jeho velikost může být horizontálně změněna.
| Kopírovat: | Kurzor v této vlastnosti označuje, že je třeba něco zkopírovat.
| Zaměřovací kříž: | Kurzor se v tomto atributu zobrazí jako nitkový kříž.
| Výchozí: | Výchozí kurzor.
| E-size: | Kurzor v tomto atributu označuje, že by se měl posunout pravý okraj rámečku.
| Změna velikosti: | Kurzor v tomto atributu představuje obousměrný kurzor pro změnu velikosti.
| Pomoc: | V této vlastnosti ukazuje kurzor, že je dostupná pomoc.
| Hýbat se: | Ukazatel v této vlastnosti znamená, že něco musí být přesunuto
| . n-velikost: | Při použití vlastnosti n-resize ukazuje ukazatel, že horní hranice rámečku by měla být posunuta.
| Jaká velikost: | Pomocí této vlastnosti kurzor ukazuje, že okraj rámečku by měl být posunut doprava a nahoru.
| Nová velikost: | Obousměrný kurzor změny velikosti je označen tímto atributem.
| Velikost Ns: | Obousměrný kurzor změny velikosti je označen atributem ns-resize.
| Nw-velikost: | Kurzor v tomto atributu ukazuje, že horní a dolní okraj rámečku se má posunout nahoru a doleva.
| Velikost nosu: | Obousměrný kurzor změny velikosti je označen tímto atributem.
| Bez pádu: | Kurzor v tomto atributu označuje, že vytažený objekt nelze v tomto umístění vypsat.
| Žádný: | U prvku podle tohoto atributu se nezobrazuje kurzor.
| Nepovoleno: | Kurzor v této vlastnosti indikuje, že požadovaná akce nebude provedena.
| Ukazatel: | Kurzor v této vlastnosti slouží jako ukazatel a zobrazuje průběh propojení.
| Pokrok: | Kurzor v tomto atributu ukazuje, že program je aktivní.
| Velikost řádku: | Kurzor ukazuje, že tato funkce umožňuje vertikální změnu velikosti řádku.
| S-velikost: | Při použití této vlastnosti ukazuje ukazatel, že spodní hranice rámečku by měla být snížena.
| Změna velikosti: | Kurzor v tomto atributu označuje, že okraj rámečku by měl být posunut doprava a dolů.
| Sw-size: | Kurzor v tomto atributu označuje, že levý a spodní okraj rámečku by se měl posunout.
| Text: | Kurzor v tomto atributu označuje text, který lze vybrat.
| URL: | Tato vlastnost obsahuje seznam adres URL vlastních kurzorů oddělených čárkami a obecný kurzor na konci seznamu.
| Vertikální text: | Kurzor v tomto atributu ukazuje možné výběry svislého textu.
| W-velikost: | Při použití této vlastnosti ukazuje ukazatel, že by se měl přesunout levý okraj rámečku.
Příklad
Tento příklad ukazuje, jak využít vlastnost kurzoru. Program je zaneprázdněn, protože hodnota vlastnosti kurzoru je nastavena na čekání.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Výstup
Pomocí vlastnosti kurzoru CSS můžeme určit druh kurzoru, který se má uživateli zobrazit. Užitečnou aplikací této funkce je použití fotografií jako tlačítek pro odeslání na formulářích. Ve výchozím nastavení se místo ukazatele zobrazí ruka, když je kurzor nad odkazem.
