Što su kursori u CSS-u?

Svaki dan već koristimo prilagođene pokazivače. Ova interakcija omogućena je upotrebom modificiranih pokazivača, na primjer kada lebdite iznad gumba, kursor se pretvara u ruku ili kada lebdite iznad teksta i kursor se pretvara u kursor teksta.

Međutim, pokazivači se također mogu koristiti kako bi našim korisnicima pružili razne dodatne kreativne mogućnosti.

kada je izumljeno prvo računalo

Trebali bismo biti svjesni da CSS već ima zadane pokazivače za razne radnje koje se često izvode prije nego počnemo razvijati svoje prilagođene pokazivače.

Ovi pokazivači pružaju opcije za djelovanje na točnom mjestu nad kojim lebdite. Primjeri uključuju pokazivače koji pokazuju da biste trebali kliknuti na veze, povlačiti i ispuštati elemente, povećavati i smanjivati ​​objekte i još mnogo toga.

Upotrijebite svojstvo CSS pokazivača da biste opisali vrstu pokazivača koju želite.

Svojstvo CSS kursora

Možemo odrediti vrstu kursora koji bi trebao biti prikazan korisniku pomoću svojstva CSS kursora.

java dijagram klasa

Korištenje fotografija kao gumba za slanje na obrascima korisna je primjena ove mogućnosti. Prema zadanim postavkama, ruka se pojavljuje umjesto pokazivača kada je kursor iznad veze. Međutim, gumb za slanje obrasca ne uzrokuje promjenu obrasca. Ovo služi kao vizualni znak da se na sliku može kliknuti kad god netko prijeđe pokazivačem iznad slike koja je gumb za slanje.

Ovo svojstvo navedeno je s nula ili više vrijednosti odvojenih zarezima, iza kojih slijedi jedna vrijednost ključne riječi prema potrebi, a svaka će se odnositi na slikovnu datoteku.

Sintaksa

parseint java

 cursor: value; 

Vrijednosti imovine

Auto:Zadana postavka za ovaj atribut je postavljanje kursora.Alias:Ovaj se atribut koristi za prikaz pokazivača koji se odnosi na stvaranje kursora.Sve pomicanje:Kursor u ovom atributu označava pomicanje.Ćelija:Kursor u ovom svojstvu označava da je trenutno odabrana ćelija ili grupa ćelija.Kontekstni izbornik:Kursor u ovom atributu pokazuje prisutnost kontekstnog izbornika.Promjena veličine u stupcu:Kada je kursor iznad stupca u ovom svojstvu, može mu se vodoravno promijeniti veličina.Kopirati:Kursor u ovom svojstvu označava da se nešto mora kopirati.Nišan:Kursor se u ovom atributu pojavljuje kao križić.Zadano:Zadani kursor.E-promjena veličine:Kursor u ovom atributu označava da se desni rub okvira treba pomaknuti.Promjena veličine:Kursor u ovom atributu predstavlja dvosmjerni kursor za promjenu veličine.Pomozite:U ovom svojstvu kursor pokazuje da je pomoć dostupna.Potez:Pokazivač u ovom svojstvu implicira da se nešto mora pomaknuti. n-promjena veličine:Kada koristite svojstvo n-resize, pokazivač pokazuje da se gornja granica okvira treba pomaknuti.Što promijeniti veličinu:Uz ovo svojstvo, kursor pokazuje da rub okvira treba biti pomaknut udesno i gore.Nova promjena veličine:Dvosmjerni kursor za promjenu veličine označen je ovim atributom.Ns-promjena veličine:Dvosmjerni kursor za promjenu veličine označen je atributom ns-resize.Nw-promjena veličine:Kursor u ovom atributu pokazuje da gornji i donji rub okvira treba pomaknuti gore i lijevo.Promjena veličine nosa:Dvosmjerni kursor za promjenu veličine označen je ovim atributom.Bez pada:Kursor u ovom atributu označava da se izvučeni objekt ne može baciti na ovu lokaciju.ništa:Kursor se ne prikazuje za element prema ovom atributu.Nije dozvoljeno:Kursor u ovom svojstvu označava da se tražena radnja neće izvršiti.Pokazivač:Kursor u ovom svojstvu služi kao pokazivač i prikazuje napredak veze.Napredak:Kursor u ovom atributu pokazuje da je program aktivan.Promjena veličine retka:Kursor pokazuje da ova značajka omogućuje promjenu veličine okomitog reda.S-promjena veličine:Kada koristite ovo svojstvo, pokazivač pokazuje da donju granicu okvira treba spustiti.Promjena veličine:Kursor u ovom atributu označava da rub okvira treba biti pomaknut udesno i dolje.Sw-promjena veličine:Kursor u ovom atributu označava da lijevi i donji rub okvira treba pomaknuti.Tekst:Kursor u ovom atributu označava tekst koji se može odabrati.URL:Ovo svojstvo sadrži popis prilagođenih URL-ova kursora odvojenih zarezima i generički kursor na kraju popisa.Vertikalni tekst:Kursor u ovom atributu pokazuje moguće odabire okomitog teksta.W-promjena veličine:Kada koristite ovo svojstvo, pokazivač pokazuje da lijevi rub okvira treba pomaknuti.

Primjer

Ovaj primjer pokazuje kako koristiti svojstvo kursora. Program je zauzet jer je vrijednost svojstva kursora postavljena na čekanje.

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 

Izlaz

Možemo odrediti vrstu kursora koji bi trebao biti prikazan korisniku pomoću svojstva CSS kursora. Korištenje fotografija kao gumba za slanje na obrascima korisna je primjena ove mogućnosti. Prema zadanim postavkama, ruka se pojavljuje umjesto pokazivača kada je kursor iznad veze.