I CSS används olika typer av markörer för olika HTML-element, och för att ändra typ av markör, ' markören ” egendom används. Den tillåter dig att ändra markörtyp och ställa in värdet på markören du vill visa på skärmen. Som en extra funktion låter den dig också ställa in din egen markörbild.

I den här guiden får du lära dig:

• Vad är cursor CSS-egenskap
• Hur man ändrar markören till bild på Hover med CSS

Så, låt oss börja!

Vad är 'markör' CSS-egenskap?

För att kontrollera utseendet på musen över ett HTML-element, ' markören ”-egenskapen för CSS kan användas. Det gör det möjligt att ändra den vanliga markören till olika typer som kopieringsmarkör, handpekare, grab och många fler. Du kan också ställa in din egen anpassade markör genom att ställa in webbadressen till bilden i marköregenskapen.

Syntax

Syntaxen för marköregenskapen ges som:

I den ovan angivna syntaxen, tilldela bildens sökväg i ' url() ” som du vill visa på skärmen.

Vi kommer nu att gå till exemplet för att ändra den vanliga markören till en bild vid hovring.

Hur ändrar man markören till bild när man svävar med hjälp av CSS?

För att ändra markören till en bild när du håller muspekaren, lägg först till ett element i HTML.

Exempel 1: Ändra markören till en bild med muspekaren med marköregenskapen

Vi kommer att skapa en rubrik

och knappklassnamn ' btn ”.

HTML

< kropp >
< h1 > Ändra markören till bild vid muspekaren h1 >
< knapp klass = 'btn' > Klicka här knapp >
kropp >

För närvarande visas standardmarkören om du håller musen över knappen:

Flytta nu till CSS och ändra markören till bilden.

Ställ sedan in bildens sökväg i ' url() ”. Till exempel har vi specificerat 'i with.svg ” som vår valda bild. Ställ sedan in värdet på marköregenskapen som ' bil ”.

CSS

.btn {
markör: url ( icon.svg ) , auto;
stoppning: 10px;
}

Spara ovanstående kod och kör HTML-filen för att se följande resultat:

Den givna utdata indikerar att markören framgångsrikt har ändrats till en bild vid hovring.

Notera: ' bil ” används som ett alternativ i marköregenskapen; när bilden inte laddas, eller själva filsökvägen eller filen saknas, visas standardikonen på skärmen på grund av autovärdet.

Exempel 2: Ställa in standardmarkör vid hovring

Till exempel kommer vi att ge bildens url och bara ställa in värdet på marköregenskapen som ' bil ”:

markör: url ( ) , auto;

Som ett resultat kommer markören inte att ändras när den hålls över knappen:

Exempel 3: Ställa in bildalternativ vid hovring

I stället för auto kan du ställa in olika värden på markören du vill visa som ett alternativ till bilden. Till exempel kommer vi att ändra värdet på marköregenskapen från ' bil ' till ' pekare ”:

markör: url ( ) , pekare;

Som du kan se i utgången nedan ändras markören till en handpekare när den svävar över knappen:

Vi har tillhandahållit den enklaste metoden för att ändra markörbilden vid hovring med CSS.

Slutsats

I CSS kan du ändra markören till bilden när du håller muspekaren med hjälp av ' markören ' fast egendom. Det gör det möjligt att ändra en vanlig markör till en bild genom att tilldela ' url ” av bilden till marköregenskapen. Du kan använda vilken typ av markör som helst som du vill visa när den har svävat över ett element. Den här artikeln demonstrerade metoden för att ändra markören till en handpekare.