A kurzor azt a helyet jelzi a képernyőn, ahol a felhasználó rákattinthat vagy szöveget írhat be. A webhely különböző összetevőihez különböző kurzorok használhatók. A fejlesztőnek gondoskodnia kell arról, hogy az alkalmazásban használt kurzorok vonzóak legyenek. Például egy mutató kézi kurzor használható az egérmutató gombján. A szöveg (villogó vonal) jelző azon a szövegmezőn kerül felhasználásra, ahová a szöveget be kell írni.
A CSS-ben több kurzorstílus is használható, csak a kurzor tulajdonság értékének megadásával. A fejlesztő azonban létrehozhat egy testreszabott kurzort CSS használatával.
Ez a tanulmányi útmutató a következőket nyújtja:
-
- CSS kurzor
- Egyéni kurzor CSS
Mielőtt belevágnánk a témába, lássunk néhány CSS kurzor alakzatot egy gyakorlati példával.
CSS kurzor
A CSS' kurzor ” tulajdonságnak különböző értékei vannak, például egy pointer, none, progress stb. Hozzunk létre egy táblázatot, amely sorokat tartalmaz, amelyeken különböző kurzorok jelennek meg az egérmutatóval.
Példa: Különböző CSS-kurzorokat ábrázoló táblázat létrehozása HTML-ben
Először adja hozzá a
| címkék segítségével határozzuk meg. Más | |||
|---|---|---|---|
címkét tartalmaznak az oszlopok adatokkal való feltöltéséhez.
| címke azokat a gombelemeket jelöli, amelyeket a CSS-sel alkalmazunk. kurzor ” ingatlan különböző értékekkel.
| A fenti forgatókönyv HTML-kódja az alábbiakban található: < asztal >< tr > < th stílus = 'szélesség: 200 képpont;' > css kurzor választó th > < th stílus = 'szélesség: 200 képpont;' > kurzor stílus th > tr > < tr > < td > kurzor: mutató td > < td >< gomb stílus = 'kurzor: mutató;' > mutató gomb > td > tr > < tr > < td > kurzor: haladás td > < td >< gomb stílus = 'kurzor: haladás;' > előrehalad gomb > td > tr > < tr > < td > kurzor: nem engedélyezett td > < td >< gomb stílus = 'kurzor: nem engedélyezett;' > nem megengedett gomb > td > tr > < tr > < td > kurzor: nincs td > < td >< gomb stílus = 'kurzor: nincs;' > egyik sem gomb > td > tr > < tr > < td > kurzor: mozgat td > < td >< gomb stílus = 'kurzor: mozgat;' > mozog gomb > td > tr > < tr > < td > kurzor: megragad td > < td >< gomb stílus = 'kurzor: megragad;' > Megragad gomb > td > tr > < tr > < td > kurzor: másolás td > < td >< gomb stílus = 'kurzor: másolás;' > másolat gomb > td > tr > < tr > < td > kurzor: col-resize td > < td >< gomb stílus = 'kurzor: col-resize;' > col-resize gomb > td > tr > < tr > < td > kurzor: sor átméretezése td > < td >< gomb stílus = 'kurzor: sor átméretezése;' > sor-átméretezés gomb > td > tr > < tr > < td > kurzor: szöveg td > < td >< gomb stílus = 'kurzor: szöveg;' > szöveg gomb > td > tr > asztal > Stílus „minden” elem * {párnázás: 0 ; árrés: 0 ; font-család: Arial, Helvetica, sans-serif; }
Stílus „asztal” elem asztal {margó: 0px auto; szegély: 1px tömör gainsboro; }
' árrés ” tulajdonság a fentiek szerint viselkedik. Stílus „td” elem td {szöveg igazítása: középre; } elem a ' tulajdonsággal kerül alkalmazásra szöveg igazítás ' értékkel ' központ ”. Középre igazítja az oszlop szövegét.
| Stílus „gomb” elem gomb {háttérszín: kadetkék; padding: 10px 10px; szín: #ffffff; szélesség: 150 képpont; }
A fenti kód a következő eredményt generálja: Egyéni kurzor CSSA fejlesztőknek megfelelő kurzorokat kell használniuk alkalmazásaikhoz. A kurzorokat vonzóvá kell tenni, hogy felkeltsük a felhasználók figyelmét. Sőt, erre a célra egyéni kurzor is létrehozható. Nézd meg az alábbi példát! Példa: Hogyan lehet egyéni kurzort létrehozni CSS-sel? A HTML-ben adjon hozzá két div elemet. Egy az osztállyal' kör 'a másik pedig az osztállyal' pont ”. HTML < div osztály = 'kör' > div >< div osztály = 'pont' > div > Stílus „test” elem test {magasság: 100vh; } Stílus „kör” oszt .kör {szélesség: 20 képpont; magasság: 20px; szegély: 2px tömör fehér; határsugár: ötven % ; }
Stílus „pont” div .pont {szélesség: 5px; magasság: 5px; háttérszín: fehér; határsugár: ötven % ; }
A megadott kód a következő kurzort jeleníti meg a weboldalon: JavaScript < forgatókönyv >const cursorCircle = document.querySelector ( '.kör' ) ; const cursorPoint = document.querySelector ( '.pont' ) ; const moveKurzor = ( és ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` fordít ( ${egérX} px, ${egérY} px ) ` ; cursorPoint.style.transform = ` fordít ( ${egérX} px, ${egérY} px ) ` ; } window.addEventListener ( 'egérmozgás' , mozgassa a kurzort ) forgatókönyv >
A fenti kódblokkok megadása után a kurzor automatikusan mozog a képernyőn az alábbiak szerint: KövetkeztetésA CSS' kurzor ” tulajdonságnak számos értéke van, amelyek különböző kurzorstílusokat jeleznek. A HTML elemek és a CSS tulajdonságok felhasználásával azonban testreszabott kurzorokat készíthetünk. Ezután a JavaScript kódot implementálják a funkciójának aktiválásához. Ez a tanulmány gyakorlati példán keresztül bemutatta, hogyan lehet egyéni CSS-kurzorokat létrehozni. |
