Kurzor označuje pozici na obrazovce, kde může uživatel kliknout nebo zadat text. Pro různé komponenty webu mohou být použity různé kurzory. Vývojář musí zajistit, aby kurzory použité v aplikaci byly atraktivní. Například kurzor ukazující ruky lze použít na tlačítko při najetí myší. Indikátor textu (blikající čára) se používá na textovém poli, kam se má text zadat.
V CSS se používá několik stylů kurzoru pouhým zadáním hodnoty vlastnosti kurzoru. Vývojář však může vytvořit přizpůsobený kurzor pomocí CSS.
Tato studijní příručka poskytne:
-
- CSS kurzor
- Vlastní kurzor CSS
Než se pustíme do tématu, podívejme se na některé tvary kurzoru CSS s praktickým příkladem.
CSS kurzor
CSS' kurzor ” vlastnost má různé hodnoty, jako je ukazatel, žádný, průběh a další. Vytvořme tabulku, která obsahuje řádky, na kterých se budou při najetí myší zobrazovat různé kurzory.
Příklad: Vytvoření tabulky představující různé kurzory CSS v HTML
Nejprve přidejte do HTML prvek
| . Ostatní tagy | |||
|---|---|---|---|
k naplnění sloupců daty.
| představuje prvky tlačítka, které se aplikují pomocí CSS “ kurzor ” vlastnost s různými hodnotami.
| HTML kód pro výše uvedený scénář je uveden níže: < stůl >< tr > < čt styl = 'width: 200px;' > css kurzorový volič čt > < čt styl = 'width: 200px;' > styl kurzoru čt > tr > < tr > < td > kurzor: ukazatel td > < td < knoflík styl = 'kurzor: ukazatel;' > ukazatel knoflík > td > tr > < tr > < td > kurzor: pokrok td > < td < knoflík styl = 'kurzor: pokrok;' > pokrok knoflík > td > tr > < tr > < td > kurzor: není povolen td > < td < knoflík styl = 'kurzor: není-povoleno;' > nepovoleno knoflík > td > tr > < tr > < td > kurzor: žádný td > < td < knoflík styl = 'kurzor: žádný;' > žádný knoflík > td > tr > < tr > < td > kurzor: pohyb td > < td < knoflík styl = 'kurzor: pohyb;' > přestěhovat se knoflík > td > tr > < tr > < td > kurzor: uchopit td > < td < knoflík styl = 'kurzor: uchopit;' > urvat knoflík > td > tr > < tr > < td > kurzor: kopírovat td > < td < knoflík styl = 'kurzor: kopie;' > kopírovat knoflík > td > tr > < tr > < td > kurzor: col-size td > < td < knoflík styl = 'kurzor: col-size;' > kol-změna velikosti knoflík > td > tr > < tr > < td > kurzor: velikost řádku td > < td < knoflík styl = 'kurzor: row-size;' > Změna velikosti řádku knoflík > td > tr > < tr > < td > kurzor: text td > < td < knoflík styl = 'kurzor: text;' > text knoflík > td > tr > stůl > Styl „všech“ prvků * {vycpávka: 0 ; okraj: 0 ; rodina písem: Arial, Helvetica, sans-serif; }
Stylový prvek „stůl“. stůl {okraj: 0px auto; hranice: 1px solid gainsboro; }
“ okraj vlastnost se chová tak, jak je uvedeno výše. Styl prvek „td“. td {text-align: center; } se použije s vlastností “ zarovnání textu “ s hodnotou “ centrum “. Zarovná text sloupce na střed.
| Styl prvek „tlačítko“. knoflík {barva pozadí: kadetově modrá; odsazení: 10px 10px; barva: #ffffff; šířka: 150px; }
Výše uvedený kód vygeneruje následující výsledek: Vlastní kurzor CSSVývojáři musí pro své aplikace používat vhodné kurzory. Kurzory by měly být atraktivní, aby získaly pozornost uživatelů. Navíc lze pro tento účel vytvořit vlastní kurzor. Podívejte se na příklad níže! Příklad: Jak vytvořit vlastní kurzor pomocí CSS? V HTML přidejte dva prvky div. Jeden se třídou' kruh “ a druhý se třídou “ směřovat “. HTML < div třída = 'kruh' > div >< div třída = 'směřovat' > div > Stylový prvek „tělo“. tělo {výška: 100vh; } Divize stylu „kruh“. .kruh {šířka: 20px; výška: 20px; ohraničení: 2px plná bílá; okraj-poloměr: padesátka % ; }
Styl „bod“ div .směřovat {šířka: 5px; výška: 5px; barva pozadí: bílá; okraj-poloměr: padesátka % ; }
Daný kód zobrazí na webové stránce následující kurzor: JavaScript < skript >const cursorCircle = document.querySelector ( '.kruh' ) ; const cursorPoint = document.querySelector ( '.směřovat' ) ; const moveCursor = ( a ) = > { const mouseY = e.clientY; const mouseX = e.clientX; kurzorCircle.style.transform = ` přeložit ( ${mouseX} px, ${mouseY} px ) ` ; kurzorPoint.style.transform = ` přeložit ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , pohyb kurzoru ) skript >
Po poskytnutí výše uvedených bloků kódu se kurzor automaticky přesune na obrazovku, jak je znázorněno níže: ZávěrCSS' kurzor Vlastnost ” má mnoho hodnot, které označují různé styly kurzoru. Využitím prvků HTML a vlastností CSS však můžeme vytvářet přizpůsobené kurzory. Poté je implementován JavaScript kód pro aktivaci jeho funkčnosti. Tato studie na praktickém příkladu demonstrovala, jak vytvořit vlastní kurzory CSS. |
