Mi az a kurzor a CSS-ben?
Már minden nap használunk testreszabott kurzorokat. Ezt az interakciót módosított kurzorok teszik lehetővé, például amikor a gombok fölé viszi az egérmutatót, a mutató kurzora kézré alakul, vagy ha a szöveg fölé viszi az egeret, és a kurzor szövegkurzorrá alakul.
A kurzorok azonban arra is használhatók, hogy felhasználóinknak különféle további kreatív lehetőségeket biztosítsanak.
Tudnunk kell, hogy a CSS-nek már vannak alapértelmezett kurzorai a különféle gyakran végrehajtott műveletekhez, mielőtt elkezdjük egyéni kurzoraink fejlesztését.
Ezek a kurzorok cselekvési lehetőségeket kínálnak azon a ponton, ahol az egérmutatót mozgatja. Példák közé tartoznak a kurzorok, amelyek azt jelzik, hogy kattints a hivatkozásokra, húzd át az elemeket, nagyítsd és kicsinyítsd az objektumokat stb.
A CSS kurzor tulajdonság segítségével írja le a kívánt kurzortípust.
CSS kurzor tulajdonság
A CSS kurzor tulajdonság használatával megadhatjuk, hogy milyen kurzort kell megjeleníteni a felhasználó számára.
A fotók beküldőgombként való használata az űrlapokon ennek a funkciónak egy hasznos alkalmazása. Alapértelmezés szerint egy kéz jelenik meg a mutató helyett, ha a kurzor egy hivatkozás felett van. Az űrlap elküldése gombja azonban nem módosítja az űrlapot. Ez vizuális jelzésként szolgál arra vonatkozóan, hogy a kép bármikor kattintható, amikor valaki egy olyan kép fölé viszi az egérmutatót, amely egy elküldés gomb.
Ezt a tulajdonságot nulla vagy több érték adja meg, vesszővel elválasztva, majd szükség szerint egy kulcsszó érték, és mindegyik a képfájlra fog hivatkozni.
Szintaxis
cursor: value;
Tulajdonértékek
| Automatikus: | Ennek az attribútumnak az alapértelmezett beállítása a kurzor elhelyezése.
| Álnév: | Ez az attribútum a kurzor létrehozásával kapcsolatos jelzőjének megjelenítésére szolgál.
| Teljes görgetés: | A kurzor ebben az attribútumban görgetést jelöl.
| Sejt: | A kurzor ebben a tulajdonságban azt jelzi, hogy egy cella vagy cellacsoport jelenleg ki van választva.
| Helyi menü: | A kurzor ebben az attribútumban egy helyi menü jelenlétét mutatja.
| Col-resize: | Ha a kurzor egy oszlop felett van ebben a tulajdonságban, akkor az átméretezhető vízszintesen.
| Másolat: | A kurzor ebben a tulajdonságban azt jelzi, hogy valamit másolni kell.
| Hajkereszt: | A kurzor ebben az attribútumban szálkeresztként jelenik meg.
| Alapértelmezett: | Az alapértelmezett kurzor.
| E-méretezés: | A kurzor ebben az attribútumban azt jelzi, hogy a doboz jobb szélét el kell mozgatni.
| It-átméretezés: | A kurzor ebben az attribútumban egy kétirányú átméretező kurzort jelöl.
| Segítség: | Ebben a tulajdonságban a kurzor azt mutatja, hogy a segítség elérhető.
| Mozog: | A mutató ebben a tulajdonságban azt jelenti, hogy valamit el kell helyezni
| . n-resize: | Az n-resize tulajdonság használatakor a mutató azt mutatja, hogy a doboz felső határát el kell tolni.
| Milyen átméretezés: | Ezzel a tulajdonsággal a kurzor azt mutatja, hogy a doboz szélét jobbra és felfelé kell eltolni.
| Új átméretezés: | A kétirányú átméretezési kurzort ez az attribútum jelzi.
| Ns-resize: | A kétirányú átméretezési kurzort az ns-resize attribútum jelzi.
| Új átméretezés: | A kurzor ebben az attribútumban azt mutatja, hogy a doboz felső és alsó szélét felfelé és balra kell mozgatni.
| Az orr átméretezése: | A kétirányú átméretezési kurzort ez az attribútum jelzi.
| No-drop: | Az attribútumban lévő kurzor azt jelzi, hogy a kihúzott objektumot nem lehet ebbe a helyre tenni.
| Egyik sem: | Ennek az attribútumnak megfelelő elemhez nem jelenik meg kurzor.
| Nem megengedett: | A tulajdonságban lévő kurzor azt jelzi, hogy a kért művelet nem kerül végrehajtásra.
| Mutató: | Ebben a tulajdonságban a kurzor mutatóként szolgál, és megjeleníti a hivatkozás előrehaladását.
| Előrehalad: | A kurzor ebben az attribútumban azt mutatja, hogy a program aktív.
| Sor átméretezése: | A kurzor azt mutatja, hogy ez a funkció lehetővé teszi a függőleges sorok átméretezését.
| S-méret: | Ennek a tulajdonságnak a használatakor a mutató azt mutatja, hogy a doboz alsó határát le kell engedni.
| Se-resize: | A kurzor ebben az attribútumban azt jelzi, hogy a doboz szélét jobbra és lefelé kell eltolni.
| Sw-méret: | Az attribútumban lévő kurzor azt jelzi, hogy a doboz bal és alsó szélét el kell mozgatni.
| Szöveg: | A kurzor ebben az attribútumban a választható szöveget jelöli.
| URL: | Ez a tulajdonság az egyéni kurzor URL-ek listáját tartalmazza vesszővel elválasztva, és egy általános kurzort a lista végén.
| Függőleges szöveg: | Ebben az attribútumban a kurzor a lehetséges függőleges szövegkijelöléseket mutatja.
| W-méret: | A tulajdonság használatakor a mutató azt mutatja, hogy a doboz bal szélét el kell mozgatni.
Példa
Ez a példa bemutatja, hogyan kell használni a kurzor tulajdonságot. A program foglalt, mivel a kurzor tulajdonság értéke várakozásra van beállítva.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Kimenet
A CSS kurzor tulajdonság használatával megadhatjuk, hogy milyen kurzort kell megjeleníteni a felhasználó számára. A fotók beküldőgombként való használata az űrlapokon ennek a funkciónak egy hasznos alkalmazása. Alapértelmezés szerint egy kéz jelenik meg a mutató helyett, ha a kurzor egy hivatkozás felett van.
