CSS-এ, বিভিন্ন ধরনের কার্সার ব্যবহার করা হয় বিভিন্ন HTML উপাদানের জন্য, এবং কার্সারের ধরন পরিবর্তন করতে, “ কার্সার ” সম্পত্তি ব্যবহার করা হয়। এটি আপনাকে কার্সারের ধরন পরিবর্তন করতে এবং আপনি যে কার্সারটি পর্দায় প্রদর্শন করতে চান তার মান সেট করার অনুমতি দেয়। একটি অতিরিক্ত বৈশিষ্ট্য হিসাবে, এটি আপনাকে আপনার নিজস্ব কার্সার চিত্র সেট করতে দেয়।

এই গাইডে, আপনি শিখবেন:

• কার্সার CSS সম্পত্তি কি?
• সিএসএস ব্যবহার করে হোভারে কার্সারকে কীভাবে চিত্রে পরিবর্তন করবেন

সুতরাং শুরু করি!

'কারসর' সিএসএস প্রপার্টি কি?

একটি HTML উপাদানের উপর মাউসের উপস্থিতি নিয়ন্ত্রণ করতে, ' কার্সার CSS এর প্রপার্টি ব্যবহার করা যেতে পারে। এটি নিয়মিত কার্সারকে বিভিন্ন প্রকারে পরিবর্তন করতে দেয় যেমন কপি কার্সার, হ্যান্ড পয়েন্টার, গ্র্যাব এবং আরও অনেক কিছু। আপনি কার্সার সম্পত্তিতে ছবির url সেট করে আপনার নিজস্ব কাস্টম কার্সার সেট করতে পারেন।

বাক্য গঠন

কার্সার সম্পত্তির সিনট্যাক্স দেওয়া হয় এইভাবে:

উপরে প্রদত্ত সিনট্যাক্সে, 'এ চিত্রটির পথ নির্ধারণ করুন url() যা আপনি স্ক্রিনে প্রদর্শন করতে চান।

নিয়মিত কার্সারকে হোভারে একটি ইমেজে পরিবর্তন করার জন্য আমরা এখন উদাহরণে চলে যাব।

সিএসএস ব্যবহার করে হোভারে কার্সারকে কীভাবে চিত্রে পরিবর্তন করবেন?

কার্সারটিকে হোভারে একটি ছবিতে পরিবর্তন করতে, প্রথমে, HTML এ একটি উপাদান যোগ করুন।

উদাহরণ 1: কার্সার বৈশিষ্ট্য ব্যবহার করে হোভারে একটি চিত্রে কার্সার পরিবর্তন করা

আমরা একটি শিরোনাম তৈরি করব

এবং বোতাম ক্লাসের নাম “ বিটিএন ”

এইচটিএমএল

< শরীর >
< h1 > কার্সারকে হোভারে ইমেজে পরিবর্তন করুন h1 >
< বোতাম ক্লাস = 'বিটিএন' > আমাকে ক্লিক করুন বোতাম >
শরীর >

বর্তমানে, বোতামে ঘোরানো ডিফল্ট কার্সার দেখাবে:

এখন CSS-এ যান এবং কার্সারটিকে ছবিতে পরিবর্তন করুন।

তারপরে, 'এ ছবির পথ সেট করুন url() ” উদাহরণস্বরূপ, আমরা নির্দিষ্ট করেছি 'i সঙ্গে.svg ” আমাদের নির্বাচিত ছবি হিসেবে। তারপরে, কার্সার সম্পত্তির মান হিসাবে সেট করুন “ স্বয়ংক্রিয় ”

সিএসএস

.btn {
কার্সার: url ( icon.svg ) , স্বয়ংক্রিয়;
প্যাডিং: 10px;
}

উপরের কোডটি সংরক্ষণ করুন এবং নিম্নলিখিত ফলাফল দেখতে HTML ফাইলটি চালান:

প্রদত্ত আউটপুট নির্দেশ করে যে কার্সার সফলভাবে হোভারে একটি ছবিতে পরিবর্তিত হয়েছে।

বিঃদ্রঃ: ' স্বয়ংক্রিয় ” কার্সার সম্পত্তিতে একটি বিকল্প বিকল্প হিসাবে ব্যবহৃত হয়; যখন ইমেজ লোড হয় না, বা ফাইল পাথ বা ফাইল নিজেই অনুপস্থিত থাকে, তখন স্বয়ংক্রিয় মানের কারণে ডিফল্ট আইকনটি স্ক্রিনে প্রদর্শিত হয়।

উদাহরণ 2: হোভারে ডিফল্ট কার্সার সেট করা

উদাহরণ স্বরূপ, আমরা ইমেজের url দেব এবং শুধুমাত্র কার্সার প্রপার্টির মান সেট করব “ স্বয়ংক্রিয় ”:

কার্সার: url ( ) , স্বয়ংক্রিয়;

ফলস্বরূপ, বোতামের উপর ঘোরালে কার্সার পরিবর্তন হবে না:

উদাহরণ 3: হোভারে চিত্র বিকল্প সেট করা

অটোর জায়গায়, আপনি কার্সারের বিভিন্ন মান সেট করতে পারেন যা আপনি চিত্রের বিকল্প হিসাবে প্রদর্শন করতে চান। উদাহরণস্বরূপ, আমরা কার্সার সম্পত্তির মান 'থেকে পরিবর্তন করব' স্বয়ংক্রিয় ' প্রতি ' নির্দেশক ”:

কার্সার: url ( ) , পয়েন্টার;

আপনি নীচের আউটপুটে দেখতে পাচ্ছেন, কার্সারটি একটি হ্যান্ড পয়েন্টারে পরিবর্তিত হয় যখন এটি বোতামের উপর ঘোরে:

আমরা CSS ব্যবহার করে হোভারে কার্সার ইমেজ পরিবর্তন করার জন্য সবচেয়ে সহজ পদ্ধতি প্রদান করেছি।

উপসংহার

সিএসএস-এ, আপনি কার্সারকে হভারে ইমেজে পরিবর্তন করতে পারেন ' কার্সার 'সম্পত্তি। এটি নির্দিষ্ট করে একটি ছবিতে একটি নিয়মিত কার্সার পরিবর্তন করার অনুমতি দেয় url কার্সার সম্পত্তিতে চিত্রের আপনি যে কোনো ধরনের কার্সার প্রয়োগ করতে পারেন যখন আপনি এটি একটি উপাদানের উপর ঘোরাফেরা করতে চান। এই নিবন্ধটি একটি হ্যান্ড পয়েন্টারে কার্সার পরিবর্তন করার পদ্ধতি প্রদর্শন করেছে।