V CSS sa pre rôzne prvky HTML používajú rôzne typy kurzorov a na zmenu typu kurzora sa používa znak „ kurzor “ sa používa nehnuteľnosť. Umožňuje vám zmeniť typ kurzora a nastaviť hodnotu kurzora, ktorý chcete zobraziť na obrazovke. Ako ďalšia funkcia vám tiež umožňuje nastaviť vlastný obrázok kurzora.

V tejto príručke sa dozviete:

• Čo je vlastnosť CSS kurzora
• Ako zmeniť kurzor na obrázok na Hover pomocou CSS

Takže, začnime!

Čo je vlastnosť CSS „kurzor“?

Ak chcete ovládať vzhľad myši nad prvkom HTML, „ kurzor ” možno použiť vlastnosť CSS. Umožňuje zmeniť bežný kurzor na rôzne typy, ako je kopírovací kurzor, ukazovateľ ruky, uchopiť a mnoho ďalších. Môžete tiež nastaviť svoj vlastný kurzor nastavením adresy URL obrázka vo vlastnosti kurzora.

Syntax

Syntax vlastnosti kurzora je daná takto:

Vo vyššie uvedenej syntaxi priraďte cestu k obrázku v „ url() “, ktorý chcete zobraziť na obrazovke.

Teraz prejdeme na príklad, aby sme zmenili bežný kurzor na obrázok pri umiestnení kurzora myši.

Ako zmeniť kurzor na obrázok pri umiestnení kurzora myši pomocou CSS?

Ak chcete zmeniť kurzor na obrázok pri umiestnení kurzora myši, najprv pridajte prvok do HTML.

Príklad 1: Zmena kurzora na obrázok pri umiestnení kurzora myši pomocou vlastnosti kurzora

Vytvoríme nadpis

a názov triedy tlačidla “ btn “.

HTML

< telo >
< h1 > Zmeňte kurzor na obrázok pri umiestnení kurzora myši h1 >
< tlačidlo trieda = 'btn' > Klikni na mňa tlačidlo >
telo >

V súčasnosti sa po umiestnení kurzora myši na tlačidlo zobrazí predvolený kurzor:

Teraz prejdite na CSS a zmeňte kurzor na obrázok.

Potom nastavte cestu k obrázku v ' url() “. Napríklad sme špecifikovali „i s.svg “ ako náš vybraný obrázok. Potom nastavte hodnotu vlastnosti kurzor ako „ auto “.

CSS

.btn {
kurzor: url ( icon.svg ) , auto;
výplň: 10px;
}

Uložte vyššie uvedený kód a spustite súbor HTML, aby ste videli nasledujúci výsledok:

Daný výstup indikuje, že kurzor sa pri umiestnení kurzora myši úspešne zmenil na obrázok.

Poznámka: “ auto ” sa používa ako alternatívna možnosť vo vlastnosti kurzora; keď sa obrázok nenačíta alebo cesta k súboru alebo samotný súbor chýba, na obrazovke sa zobrazí predvolená ikona kvôli automatickej hodnote.

Príklad 2: Nastavenie predvoleného kurzora pri umiestnení kurzora myši

Napríklad dáme adresu URL obrázka a nastavíme iba hodnotu vlastnosti kurzora ako „ auto “:

kurzor: url ( ) , auto;

V dôsledku toho sa kurzor po umiestnení kurzora myši na tlačidlo nezmení:

Príklad 3: Nastavenie alternatívy obrázka pri umiestnení kurzora myši

Namiesto auto môžete nastaviť rôzne hodnoty kurzora, ktorý chcete zobraziť ako alternatívu k obrázku. Napríklad zmeníme hodnotu vlastnosti kurzora z „ auto “ až “ ukazovateľ “:

kurzor: url ( ) , ukazovateľ;

Ako môžete vidieť na výstupe nižšie, kurzor sa zmení na ukazovateľ ruky, keď prejde na tlačidlo:

Poskytli sme najjednoduchší spôsob zmeny obrázka kurzora pri umiestnení kurzora myši pomocou CSS.

Záver

V CSS môžete zmeniť kurzor na obrázok pri umiestnení kurzora myši pomocou „ kurzor ' nehnuteľnosť. Umožňuje zmeniť bežný kurzor na obrázok priradením „ url ” obrázka na vlastnosť kurzora. Môžete použiť ľubovoľný typ kurzora, ktorý chcete zobraziť, keď sa presunie na prvok. Tento článok demonštroval metódu zmeny kurzora na ukazovateľ ruky.