V CSS se pro různé prvky HTML používají různé typy kurzorů a pro změnu typu kurzoru se používá „ kurzor “ se používá vlastnost. Umožňuje vám změnit typ kurzoru a nastavit hodnotu kurzoru, který chcete zobrazit na obrazovce. Jako další funkce vám také umožňuje nastavit vlastní obrázek kurzoru.

V této příručce se dozvíte:

• Co je vlastnost CSS kurzoru
• Jak změnit kurzor na obrázek na Hover pomocí CSS

Takže, začněme!

Co je to „kurzorová“ vlastnost CSS?

Chcete-li ovládat vzhled kurzoru myši nad prvkem HTML, „ kurzor ” lze použít vlastnost CSS. Umožňuje změnit běžný kurzor na různé typy, jako je kopírovací kurzor, ruční ukazatel, uchopení a mnoho dalších. Můžete také nastavit svůj vlastní kurzor nastavením adresy URL obrázku ve vlastnosti kurzor.

Syntax

Syntaxe vlastnosti kurzor je dána takto:

Ve výše uvedené syntaxi přiřaďte cestu obrázku v „ url() “, který chcete zobrazit na obrazovce.

Nyní přejdeme k příkladu, abychom změnili běžný kurzor na obrázek při najetí myší.

Jak změnit kurzor na obrázek při umístění kurzoru pomocí CSS?

Chcete-li změnit kurzor na obrázek při umístění kurzoru, nejprve přidejte prvek do HTML.

Příklad 1: Změna kurzoru na obrázek při umístění kurzoru pomocí vlastnosti kurzoru

Vytvoříme nadpis

a název třídy tlačítka “ btn “.

HTML

< tělo >
< h1 > Při najetí myší změňte kurzor na obrázek h1 >
< knoflík třída = 'btn' > Klikni na mě knoflík >
tělo >

V současné době se při najetí na tlačítko zobrazí výchozí kurzor:

Nyní přejděte do CSS a změňte kurzor na obrázek.

Poté nastavte cestu obrázku v „ url() “. Například jsme specifikovali „i s.svg “ jako náš vybraný obrázek. Poté nastavte hodnotu vlastnosti kurzor jako „ auto “.

CSS

.btn {
kurzor: url ( icon.svg ) , auto;
odsazení: 10px;
}

Uložte výše uvedený kód a spusťte soubor HTML, abyste viděli následující výsledek:

Daný výstup indikuje, že kurzor se po najetí myší úspěšně změnil na obrázek.

Poznámka: “ auto ” se používá jako alternativní možnost ve vlastnosti kurzoru; když se obraz nenačte nebo cesta k souboru nebo samotný soubor chybí, na obrazovce se zobrazí výchozí ikona kvůli automatické hodnotě.

Příklad 2: Nastavení výchozího kurzoru při najetí myší

Například dáme adresu URL obrázku a nastavíme pouze hodnotu vlastnosti kurzoru jako „ auto “:

kurzor: url ( ) , auto;

V důsledku toho se kurzor při najetí na tlačítko nezmění:

Příklad 3: Nastavení alternativy obrázku při najetí myší

Místo auto můžete nastavit různé hodnoty kurzoru, který chcete zobrazit jako alternativu k obrázku. Například změníme hodnotu vlastnosti kurzor z „ auto “ až “ ukazatel “:

kurzor: url ( ) , ukazatel;

Jak můžete vidět na níže uvedeném výstupu, kurzor se změní na ukazatel ruky, když najede na tlačítko:

Poskytli jsme nejjednodušší metodu pro změnu obrázku kurzoru při najetí myší pomocí CSS.

Závěr

V CSS můžete změnit kurzor na obrázek při umístění kurzoru pomocí „ kurzor ' vlastnictví. Umožňuje změnit běžný kurzor na obrázek přiřazením „ url ” obrázku do vlastnosti kurzoru. Můžete použít jakýkoli typ kurzoru, který chcete zobrazit, když najede na prvek. Tento článek demonstroval metodu změny kurzoru na ukazatel ruky.