এই নিবন্ধটি টেলউইন্ড সিএসএস ব্যবহার করে দৃশ্যমান বৈশিষ্ট্য সহ হোভার এবং অন্যান্য রাজ্যে প্রয়োগ করার বাস্তবায়নের পদ্ধতির সাথে সম্পর্কিত।
টেলউইন্ডে দৃশ্যমানতা ইউটিলিটি সহ হোভার এবং অন্যান্য রাজ্যগুলি কীভাবে প্রয়োগ করবেন?
ভিজিবিলিটি ইউটিলিটি ব্যবহারকারীর মিথস্ক্রিয়ায় দৃশ্যমানতা পরিবর্তন করতে হোভার এবং অন্যান্য রাজ্য বরাবর ব্যবহার করা যেতে পারে। দৃশ্যমানতা ইউটিলিটির অধীনে তিনটি শ্রেণী রয়েছে যথা ' দৃশ্যমান ', ' অদৃশ্য ', এবং ' পতন ” আসুন আরও ভালভাবে বোঝার জন্য নীচের উদাহরণগুলিতে হোভার স্টেটের সাথে কিছু দৃশ্যমানতা ক্লাসকে একীভূত করি।
উদাহরণ 1: 'অদৃশ্য' ক্লাস বরাবর হোভার স্টেট প্রয়োগ করা
এই ক্ষেত্রে, নির্বাচিত উপাদানটি লুকানো হবে যখন ব্যবহারকারীর কার্সারটি উপাদানটির উপর ঘোরে, কোডটি নীচে দেখানো হয়েছে:
< শরীর >
< div ক্লাস = 'গ্রিড গ্রিড-কল-৩ গ্যাপ-৪ মাই-৪ মিক্স-৪' >
< div ক্লাস = 'bg-নীল-500 p-3 বৃত্তাকার পাঠ্য কেন্দ্র' > 01 < / div >
< div ক্লাস = 'বিজি-ব্লু-500 পি-3 হোভার: অদৃশ্য গোলাকার পাঠ্য কেন্দ্র' > 02 < / div >
< div ক্লাস = 'bg-নীল-500 p-3 বৃত্তাকার পাঠ্য কেন্দ্র' > 03 < / div >
< / div >
< / শরীর >
উপরের কোডের ব্যাখ্যা:
- প্রথমে, প্যারেন্ট ডিভ তৈরি করা হয় যা একটি তিন-কলামের গ্রিড লেআউট তৈরি করে যার প্রতিটি কলাম এবং মার্জিনের মধ্যে একটি স্থান থাকে 4px ” Tailwind CSS ব্যবহার করে “ গ্রিড ', ' grid-cols-3 ', ' ফাঁক ', ' আমার ', এবং ' mx ” যথাক্রমে ক্লাস।
- এর পরে, তিনটি শিশু ' div ” উপাদান তৈরি করা হয় এবং মৌলিক স্টাইলিং তাদের উপর প্রয়োগ করা হয়।
- এরপর ' হোভার ' CSS-এ রাজ্য বা নির্বাচক দ্বিতীয় 'div' এবং 'কে বরাদ্দ করা হয়েছে অদৃশ্য 'এটি কোলন দ্বারা পৃথক করা হয়' : ' চিহ্ন. এটি দ্বিতীয় ডিভটিকে অদৃশ্য করে তোলে যখন মাউস এটির উপর ঘোরাফেরা করে।
কার্যকরী পর্বের পরে ওয়েবপৃষ্ঠার পূর্বরূপ:
উপরের জিআইএফটি দেখায় যে দ্বিতীয় ডিভটি মাউস হোভারে অদৃশ্য হয়ে যাচ্ছে।
উদাহরণ 2: 'অদৃশ্য' ক্লাস বরাবর সক্রিয় অবস্থা প্রয়োগ করা
'সক্রিয়' অবস্থা শৈলী প্রয়োগ করে যখন ব্যবহারকারী একটি নির্দিষ্ট উপাদান নির্বাচন করে এবং ছেড়ে যায় না। ঠিক টেক্সট বক্সের মতো যখন একজন ব্যবহারকারী ফিল্ডের ভিতরে ডেটা প্রবেশ করা শুরু করে, এই সময়ে ক্ষেত্রটি সক্রিয় থাকে। সক্রিয় অবস্থা সম্পর্কে আরও স্পষ্ট বোঝার জন্য এবং এটি কীভাবে 'অদৃশ্য' ক্লাসের সাথে কাজ করে, নীচের কোডটি দেখুন:
< শরীর >< div ক্লাস = 'গ্রিড গ্রিড-কল-৩ গ্যাপ-৪ মাই-৪ মিক্স-৪' >
< div ক্লাস = 'bg-নীল-500 p-3 বৃত্তাকার পাঠ্য কেন্দ্র' >01< / div >
< div ক্লাস = 'বিজি-ব্লু-500 পি-3 সক্রিয়: অদৃশ্য গোলাকার পাঠ-কেন্দ্র' >02< / div >
< div ক্লাস = 'bg-নীল-500 p-3 বৃত্তাকার পাঠ্য কেন্দ্র' >03< / div >
< / div >
< / শরীর >
উপরের কোডে, “এর ক্লাস অদৃশ্য 'কে বরাদ্দ করা হয়েছে' সক্রিয় 'দ্বিতীয় জন্য রাষ্ট্র' div ” এলিমেন্ট সিলেক্ট করা হলে সেকেন্ড ডিভ এলিমেন্ট লুকিয়ে রাখতে।
কার্যকর করার পরে, ওয়েবপৃষ্ঠার পূর্বরূপ এই মত প্রদর্শিত হবে:
উপরের আউটপুট দেখায় যে যখন দ্বিতীয় 'div' নির্বাচন করা হয় তখন উপাদানটি অদৃশ্য হয়ে যায়।
উপসংহার
হোভার এবং সক্রিয় বা ফোকাসের মতো অন্যান্য অবস্থাগুলি নির্বাচিত উপাদানগুলির জন্য দৃশ্যমানতার বৈশিষ্ট্যগুলি পরিবর্তন করতে দৃশ্যমানতা ইউটিলিটি দ্বারা প্রদত্ত ক্লাসগুলির সাথে ব্যবহার করা যেতে পারে। মাউস হোভারে উপাদানগুলির দৃশ্যমানতা পরিবর্তন করতে, হোভার ক্লাসটি রঙ দ্বারা পৃথক করা দৃশ্যমানতার শ্রেণী বরাবর ব্যবহৃত হয় যেমন “ hover: দৃশ্যমান 'বা' হোভার: অদৃশ্য ” এই ব্লগটি দৃশ্যমানতা ইউটিলিটি সহ হোভার স্টেট প্রয়োগ করার পদ্ধতি ব্যাখ্যা করেছে।