CSS dažādu veidu kursori tiek izmantoti dažādiem HTML elementiem, un, lai mainītu kursora veidu, kursors ” īpašums tiek izmantots. Tas ļauj mainīt kursora veidu un iestatīt tā kursora vērtību, kuru vēlaties parādīt ekrānā. Kā papildu funkcija tā arī ļauj iestatīt savu kursora attēlu.

Šajā rokasgrāmatā jūs uzzināsit:

• Kas ir kursora CSS īpašums
• Kā mainīt kursoru uz attēlu kursorā, izmantojot CSS

Tātad, sākam!

Kas ir “kursora” CSS rekvizīts?

Lai kontrolētu peles parādīšanos virs HTML elementa, “ kursors ” var izmantot CSS īpašumu. Tas ļauj mainīt parasto kursoru dažādos veidos, piemēram, kopēt kursoru, rokas rādītāju, greiferu un daudz ko citu. Varat arī iestatīt savu pielāgoto kursoru, kursora rekvizītā iestatot attēla URL.

Sintakse

Kursora rekvizīta sintakse ir norādīta šādi:

Iepriekš norādītajā sintaksē piešķiriet attēla ceļu laukā ' url() ”, kuru vēlaties parādīt ekrānā.

Tagad mēs pāriesim pie piemēra, lai mainītu parasto kursoru uz attēlu, kas atrodas virs kursora.

Kā nomainīt kursoru uz attēlu uz kursora, izmantojot CSS?

Lai mainītu kursoru uz attēlu, kas atrodas virs kursora, vispirms pievienojiet elementu HTML.

1. piemērs: kursora maiņa uz attēlu, kas atrodas kursorā, izmantojot kursora īpašumu

Mēs izveidosim virsrakstu

un pogas klases nosaukumu ' btn ”.

HTML

< ķermenis >
< h1 > Mainiet kursoru uz Attēls virs kursora h1 >
< pogu klasē = 'btn' > Noklikšķiniet uz Es pogu >
ķermenis >

Pašlaik, turot kursoru uz pogas, tiks parādīts noklusējuma kursors:

Tagad pārejiet uz CSS un mainiet kursoru uz attēlu.

Pēc tam iestatiet attēla ceļu sadaļā ' url() ”. Piemēram, mēs esam norādījuši “i with.svg ” kā mūsu izvēlēto attēlu. Pēc tam iestatiet kursora rekvizīta vērtību kā ' auto ”.

CSS

.btn {
kursors: url ( ikona.svg ) , auto;
polsterējums: 10 pikseļi;
}

Saglabājiet iepriekš minēto kodu un izpildiet HTML failu, lai redzētu šādu rezultātu:

Dotā izvade norāda, ka kursors ir veiksmīgi nomainīts uz attēlu, novietojot kursoru.

Piezīme: ' auto ” tiek izmantota kā alternatīva opcija kursora rekvizītā; ja attēls netiek ielādēts vai trūkst faila ceļa vai paša faila, automātiskās vērtības dēļ ekrānā tiek parādīta noklusējuma ikona.

2. piemērs: Noklusējuma kursora iestatīšana kursorā

Piemēram, mēs norādīsim attēla URL un iestatīsim tikai kursora rekvizīta vērtību kā ' auto ”:

kursors: url ( ) , auto;

Rezultātā kursors nemainīsies, virzot kursoru virs pogas:

3. piemērs: attēla alternatīvas iestatīšana, novietojot kursoru

Automātiskā vietā varat iestatīt dažādas kursora vērtības, ko vēlaties parādīt kā alternatīvu attēlam. Piemēram, mēs mainīsim kursora rekvizīta vērtību no “ auto 'uz' rādītājs ”:

kursors: url ( ) , rādītājs;

Kā redzat zemāk esošajā izvadā, kursors tiek mainīts par rokas rādītāju, kad tas virza kursoru virs pogas:

Mēs esam nodrošinājuši vienkāršāko metodi, kā mainīt kursora attēlu, novietojot kursoru, izmantojot CSS.

Secinājums

Izmantojot CSS, varat mainīt kursoru uz attēlu, kas atrodas virs kursora, izmantojot kursors ” īpašums. Tas ļauj mainīt parasto kursoru uz attēlu, piešķirot “ url ” no attēla uz kursora īpašumu. Varat lietot jebkura veida kursoru, kuru vēlaties parādīt, kad tas ir virzījis kursoru uz elementa. Šajā rakstā tika parādīta metode, kā mainīt kursoru uz rokas rādītāju.