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 ” படத்தின் கர்சர் சொத்து. ஒரு உறுப்பு மீது வட்டமிட்டால், நீங்கள் காட்ட விரும்பும் எந்த வகை கர்சரையும் பயன்படுத்தலாம். கர்சரை கை சுட்டியாக மாற்றும் முறையை இந்தக் கட்டுரை விளக்குகிறது.