In CSS worden verschillende soorten cursors gebruikt voor verschillende HTML-elementen, en om het type cursor te wijzigen, de ' cursor ” eigendom wordt gebruikt. Hiermee kunt u het cursortype wijzigen en de waarde instellen van de cursor die u op het scherm wilt weergeven. Als extra functie kunt u ook uw eigen cursorafbeelding instellen.

In deze gids leert u:

• Wat is cursor CSS-eigenschap
• Hoe de cursor in afbeelding op Hover te veranderen met behulp van CSS

Dus laten we beginnen!

Wat is 'cursor' CSS-eigenschap?

Om het uiterlijk van de muis over een HTML-element te regelen, wordt de ' cursor ” eigenschap van CSS kan worden gebruikt. Het maakt het mogelijk om de gewone cursor in verschillende typen te veranderen, zoals kopieercursor, handaanwijzer, grijper en nog veel meer. U kunt ook uw eigen aangepaste cursor instellen door de url van de afbeelding in de cursoreigenschap in te stellen.

Syntaxis

De syntaxis van de eigenschap cursor wordt gegeven als:

Wijs in de hierboven gegeven syntaxis het pad van de afbeelding toe in de ' url() ” die u op het scherm wilt weergeven.

We gaan nu naar het voorbeeld om de gewone cursor te veranderen in een afbeelding bij zweven.

Hoe verander ik de cursor in de afbeelding bij de muisaanwijzer met behulp van CSS?

Om de cursor te veranderen in een afbeelding bij het aanwijzen, voegt u eerst een element in HTML toe.

Voorbeeld 1: Cursor wijzigen in een afbeelding met muisaanwijzer met cursoreigenschap

We zullen een kop maken

en een knopklassenaam ' btn ”.

HTML

< lichaam >
< h1 > Cursor wijzigen in afbeelding bij zweven h1 >
< knop klas = 'btn' > Klik hier knop >
lichaam >

Als u momenteel op de knop zweeft, wordt de standaardcursor weergegeven:

Ga nu naar de CSS en verander de cursor naar de afbeelding.

Stel vervolgens het pad van de afbeelding in de ' url() ”. We hebben bijvoorbeeld 'i met.svg ” als onze geselecteerde afbeelding. Stel vervolgens de waarde van de cursoreigenschap in als ' auto ”.

CSS

.btn {
cursor: url ( icon.svg ) , automatisch;
opvulling: 10px;
}

Sla de bovenstaande code op en voer het HTML-bestand uit om het volgende resultaat te zien:

De gegeven uitvoer geeft aan dat de cursor met succes is veranderd in een afbeelding bij het zweven.

Opmerking: “ auto ” wordt gebruikt als een alternatieve optie in de cursoreigenschap; wanneer de afbeelding niet laadt, of het bestandspad of bestand zelf ontbreekt, wordt het standaardpictogram op het scherm weergegeven vanwege de automatische waarde.

Voorbeeld 2: Standaardcursor instellen bij zweven

We geven bijvoorbeeld de url van de afbeelding en stellen alleen de waarde van de cursoreigenschap in als ' auto ”:

cursor: url ( ) , automatisch;

Als gevolg hiervan verandert de cursor niet wanneer deze over de knop wordt gehouden:

Voorbeeld 3: Afbeeldingalternatief instellen op Hover

In plaats van auto kunt u verschillende waarden instellen van de cursor die u wilt weergeven als alternatief voor de afbeelding. We zullen bijvoorbeeld de waarde van de cursoreigenschap wijzigen van ' auto ' tot ' wijzer ”:

cursor: url ( ) , aanwijzer;

Zoals je kunt zien in de onderstaande uitvoer, verandert de cursor in een handaanwijzer wanneer deze over de knop zweeft:

We hebben de eenvoudigste methode gegeven om de cursorafbeelding bij het zweven te wijzigen met behulp van CSS.

Conclusie

In CSS kunt u de cursor wijzigen in de afbeelding bij de muisaanwijzer met behulp van de ' cursor ' eigendom. Hiermee kunt u een gewone cursor naar een afbeelding wijzigen door de ' url ” van de afbeelding naar de cursoreigenschap. U kunt elk type cursor toepassen dat u wilt weergeven wanneer het op een element heeft gehangen. Dit artikel demonstreerde de methode om de cursor in een handaanwijzer te veranderen.