Čo sú kurzory v CSS?
Každý deň už používame prispôsobené kurzory. Táto interakcia je umožnená použitím upravených kurzorov, napríklad keď umiestnite kurzor myši na tlačidlá, kurzor sa zmení na ruku alebo keď umiestnite kurzor myši na text a kurzor sa zmení na textový kurzor.
np.nuly
Kurzory však možno použiť aj na to, aby naši používatelia získali rôzne ďalšie kreatívne príležitosti.
Mali by sme si uvedomiť, že CSS už má predvolené kurzory pre rôzne často vykonávané akcie skôr, ako začneme vyvíjať naše vlastné kurzory.
Tieto kurzory poskytujú možnosti akcie na presnom mieste, nad ktorým sa vznášate. Príklady zahŕňajú kurzory, ktoré naznačujú, že by ste mali klikať na odkazy, presúvať prvky, približovať a odďaľovať objekty a ďalšie.
Na popis požadovaného typu kurzora použite vlastnosť kurzora CSS.
Vlastnosť kurzora CSS
Pomocou vlastnosti kurzora CSS môžeme určiť druh kurzora, ktorý sa má používateľovi zobraziť.
Užitočnou aplikáciou tejto funkcie je použitie fotografií ako tlačidiel na odoslanie vo formulároch. V predvolenom nastavení sa namiesto ukazovateľa zobrazí ruka, keď je kurzor nad odkazom. Tlačidlo odoslania formulára však nespôsobí zmenu formulára. Slúži ako vizuálna pomôcka, že na obrázok je možné kliknúť vždy, keď niekto prejde kurzorom myši na obrázok, ktorý je tlačidlom na odoslanie.
Táto vlastnosť je špecifikovaná nulou alebo viacerými hodnotami oddelenými čiarkami, po ktorých podľa potreby nasleduje jedna hodnota kľúčového slova a každá bude odkazovať na súbor obrázka.
Syntax
cursor: value;
Hodnoty vlastností
| Auto: | Predvolené nastavenie pre tento atribút je umiestniť kurzor.
| alias: | Tento atribút sa používa na zobrazenie indikátora súvisiaceho s vytvorením kurzora.
| Posúvanie: | Kurzor v tomto atribúte označuje rolovanie.
| Bunka: | Kurzor v tejto vlastnosti označuje, že je momentálne vybratá bunka alebo skupina buniek.
| Obsahové menu: | Kurzor v tomto atribúte ukazuje prítomnosť kontextového menu.
| Veľkosť stĺpca: | Keď je kurzor nad stĺpcom v tejto vlastnosti, jeho veľkosť sa môže horizontálne zmeniť.
| Kopírovať: | Kurzor v tejto vlastnosti označuje, že sa niečo musí skopírovať.
| Zameriavací kríž: | Kurzor sa v tomto atribúte zobrazí ako nitkový kríž.
| Predvolená hodnota: | Predvolený kurzor.
| E-veľkosť: | Kurzor v tomto atribúte označuje, že by sa mal posunúť pravý okraj poľa.
| Jeho veľkosť: | Kurzor v tomto atribúte predstavuje obojsmerný kurzor na zmenu veľkosti.
| Pomoc: | V tejto vlastnosti kurzor ukazuje, že pomoc je dostupná.
| Presunúť: | Ukazovateľ v tejto vlastnosti naznačuje, že niečo musí byť presunuté
| . n-veľkosť: | Pri použití vlastnosti n-resize ukazovateľ ukazuje, že horná hranica poľa by sa mala posunúť.
| Aká veľkosť: | Pomocou tejto vlastnosti kurzor ukazuje, že okraj rámčeka by mal byť posunutý doprava a nahor.
| Nová veľkosť: | Obojsmerný kurzor zmeny veľkosti je označený týmto atribútom.
| Veľkosť Ns: | Obojsmerný kurzor zmeny veľkosti je označený atribútom ns-resize.
| Nw-veľkosť: | Kurzor v tomto atribúte ukazuje, že horný a dolný okraj rámčeka sa majú posunúť nahor a doľava.
| Veľkosť nosa: | Obojsmerný kurzor zmeny veľkosti je označený týmto atribútom.
| Bez pádu: | Kurzor v tomto atribúte označuje, že stiahnutý objekt nie je možné na tomto mieste uložiť.
| Žiadne: | Pre prvok podľa tohto atribútu sa nezobrazuje kurzor.
| Nepovolené: | Kurzor v tejto vlastnosti indikuje, že požadovaná akcia nebude vykonaná.
| Ukazovateľ: | Kurzor v tejto vlastnosti slúži ako ukazovateľ a zobrazuje priebeh prepojenia.
| Pokrok: | Kurzor v tomto atribúte ukazuje, že program je aktívny.
| Veľkosť riadku: | Kurzor ukazuje, že táto funkcia umožňuje vertikálnu zmenu veľkosti riadkov.
| Veľkosť S: | Pri použití tejto vlastnosti ukazovateľ ukazuje, že spodná hranica boxu by sa mala znížiť.
| Zmena veľkosti: | Kurzor v tomto atribúte označuje, že okraj rámčeka by mal byť posunutý doprava a nadol.
| Sw-size: | Kurzor v tomto atribúte označuje, že ľavý a spodný okraj rámčeka by sa mal presunúť.
| Text: | Kurzor v tomto atribúte označuje text, ktorý možno vybrať.
| URL: | Táto vlastnosť obsahuje zoznam adries URL vlastných kurzorov oddelených čiarkami a všeobecný kurzor na konci zoznamu.
| Vertikálny text: | Kurzor v tomto atribúte zobrazuje možné výbery vertikálneho textu.
| Veľkosť W: | Pri použití tejto vlastnosti ukazovateľ ukazuje, že ľavý okraj poľa by sa mal presunúť.
Príklad
Tento príklad ukazuje, ako využiť vlastnosť kurzora. Program je zaneprázdnený, pretože hodnota vlastnosti kurzora je nastavená na čakanie.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Výkon
Pomocou vlastnosti kurzora CSS môžeme určiť druh kurzora, ktorý sa má používateľovi zobraziť. Užitočnou aplikáciou tejto funkcie je použitie fotografií ako tlačidiel na odoslanie vo formulároch. V predvolenom nastavení sa namiesto ukazovateľa zobrazí ruka, keď je kurzor nad odkazom.
