CSSలో, వివిధ HTML మూలకాల కోసం వివిధ రకాల కర్సర్‌లు ఉపయోగించబడతాయి మరియు కర్సర్ రకాన్ని మార్చడానికి, ' కర్సర్ ” ఆస్తి ఉపయోగించబడుతుంది. ఇది కర్సర్ రకాన్ని మార్చడానికి మరియు మీరు స్క్రీన్‌పై ప్రదర్శించాలనుకుంటున్న కర్సర్ విలువను సెట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. అదనపు ఫీచర్‌గా, ఇది మీ స్వంత కర్సర్ చిత్రాన్ని సెట్ చేయడానికి కూడా మిమ్మల్ని అనుమతిస్తుంది.

ఈ గైడ్‌లో, మీరు నేర్చుకుంటారు:

• కర్సర్ CSS ప్రాపర్టీ అంటే ఏమిటి
• CSSని ఉపయోగించి హోవర్‌లో కర్సర్‌ని ఇమేజ్‌గా మార్చడం ఎలా

కాబట్టి, ప్రారంభిద్దాం!

'కర్సర్' CSS ప్రాపర్టీ అంటే ఏమిటి?

HTML మూలకంపై మౌస్ రూపాన్ని నియంత్రించడానికి, ' కర్సర్ ” CSS యొక్క ఆస్తిని ఉపయోగించవచ్చు. ఇది సాధారణ కర్సర్‌ను కాపీ కర్సర్, హ్యాండ్ పాయింటర్, గ్రాబ్ మరియు మరెన్నో రకాలుగా మార్చడానికి అనుమతిస్తుంది. మీరు కర్సర్ ప్రాపర్టీలో ఇమేజ్ యొక్క urlని సెట్ చేయడం ద్వారా మీ స్వంత కస్టమ్ కర్సర్‌ను కూడా సెట్ చేయవచ్చు.

వాక్యనిర్మాణం

కర్సర్ ప్రాపర్టీ యొక్క సింటాక్స్ ఇలా ఇవ్వబడింది:

పైన ఇచ్చిన సింటాక్స్‌లో, చిత్రం యొక్క మార్గాన్ని “ url() ” మీరు స్క్రీన్‌పై ప్రదర్శించాలనుకుంటున్నారు.

మేము ఇప్పుడు సాధారణ కర్సర్‌ను హోవర్‌లో ఇమేజ్‌గా మార్చడానికి ఉదాహరణకి వెళ్తాము.

CSSని ఉపయోగించి కర్సర్‌ను హోవర్‌లో ఇమేజ్‌గా మార్చడం ఎలా?

కర్సర్‌ను హోవర్‌లో ఇమేజ్‌కి మార్చడానికి, ముందుగా HTMLలో ఒక మూలకాన్ని జోడించండి.

ఉదాహరణ 1: కర్సర్ ప్రాపర్టీని ఉపయోగించి కర్సర్‌ని కర్సర్‌ని ఇమేజ్‌కి మార్చడం

మేము శీర్షిక

మరియు బటన్ క్లాస్ పేరు “ని సృష్టిస్తాము btn ”.

HTML

< శరీరం >
< h1 > కర్సర్‌ను హోవర్‌లో ఇమేజ్‌గా మార్చండి h1 >
< బటన్ తరగతి = 'btn' > నన్ను క్లిక్ చెయ్యి బటన్ >
శరీరం >

ప్రస్తుతం, బటన్‌పై హోవర్ చేయడం డిఫాల్ట్ కర్సర్‌ను చూపుతుంది:

ఇప్పుడు CSSకి తరలించి, కర్సర్‌ను ఇమేజ్‌కి మార్చండి.

ఆపై, చిత్రం యొక్క మార్గాన్ని “లో సెట్ చేయండి url() ”. ఉదాహరణకు, మేము “i తో.svg ” మేము ఎంచుకున్న చిత్రంగా. అప్పుడు, కర్సర్ ఆస్తి విలువను ఇలా సెట్ చేయండి దానంతట అదే ”.

CSS

.btn {
కర్సర్: url ( icon.svg ) , దానంతట అదే;
పాడింగ్: 10px;
}

కింది ఫలితాన్ని చూడటానికి పై కోడ్‌ని సేవ్ చేసి, HTML ఫైల్‌ను అమలు చేయండి:

ఇచ్చిన అవుట్‌పుట్ కర్సర్ విజయవంతంగా హోవర్‌లో ఇమేజ్‌గా మార్చబడిందని సూచిస్తుంది.

గమనిక: ' దానంతట అదే ” కర్సర్ ప్రాపర్టీలో ప్రత్యామ్నాయ ఎంపికగా ఉపయోగించబడుతుంది; చిత్రం లోడ్ కానప్పుడు లేదా ఫైల్ మార్గం లేదా ఫైల్ తప్పిపోయినప్పుడు, ఆటో విలువ కారణంగా డిఫాల్ట్ చిహ్నం స్క్రీన్‌పై ప్రదర్శించబడుతుంది.

ఉదాహరణ 2: హోవర్‌లో డిఫాల్ట్ కర్సర్‌ని సెట్ చేయడం

ఉదాహరణకు, మేము చిత్రం యొక్క urlని ఇస్తాము మరియు కర్సర్ ఆస్తి విలువను మాత్రమే “ దానంతట అదే ”:

కర్సర్: url ( ) , దానంతట అదే;

ఫలితంగా, బటన్‌పై ఉంచినప్పుడు కర్సర్ మారదు:

ఉదాహరణ 3: హోవర్‌లో ఇమేజ్ ఆల్టర్నేటివ్‌ని సెట్ చేయడం

ఆటో స్థానంలో, మీరు ఇమేజ్‌కి ప్రత్యామ్నాయంగా ప్రదర్శించాలనుకుంటున్న కర్సర్ యొక్క విభిన్న విలువలను సెట్ చేయవచ్చు. ఉదాహరణకు, మేము కర్సర్ ఆస్తి విలువను '' నుండి మారుస్తాము. దానంతట అదే ' నుండి ' పాయింటర్ ”:

కర్సర్: url ( ) , పాయింటర్;

మీరు దిగువ అవుట్‌పుట్‌లో చూడగలిగినట్లుగా, కర్సర్ బటన్‌పై హోవర్ చేసినప్పుడు అది హ్యాండ్ పాయింటర్‌గా మార్చబడుతుంది:

CSSని ఉపయోగించి హోవర్‌లో కర్సర్ చిత్రాన్ని మార్చడానికి మేము సులభమైన పద్ధతిని అందించాము.

ముగింపు

CSSలో, మీరు కర్సర్‌ను కర్సర్‌ని '' ఉపయోగించి హోవర్‌లో ఉన్న ఇమేజ్‌కి మార్చవచ్చు. కర్సర్ ”ఆస్తి. ఇది “ని కేటాయించడం ద్వారా సాధారణ కర్సర్‌ను ఇమేజ్‌కి మార్చడానికి అనుమతిస్తుంది. url కర్సర్ ఆస్తికి చిత్రం. ఎలిమెంట్‌పై కర్సర్‌ని ఉంచినప్పుడు మీరు ప్రదర్శించదలిచిన ఏ రకమైన కర్సర్‌నైనా మీరు వర్తింపజేయవచ్చు. ఈ వ్యాసం కర్సర్‌ను హ్యాండ్ పాయింటర్‌గా మార్చే పద్ధతిని ప్రదర్శించింది.