CSS-এ লিঙ্কের অবস্থা

আমি মনে করি আপনি, ইন্টারনেটে বিভিন্ন ওয়েবসাইট পরিদর্শন করার সময়, লক্ষ্য করেছেন যে লিঙ্কগুলি সাধারণত সেগুলির উপর মাউস নিয়ে যাওয়ার উপর প্রতিক্রিয়া দেখায়। বিভিন্ন অবস্থায় লিঙ্কের আচরণ নির্ধারণ করে এইরকম প্রভাব অর্জন করা যায়।

উদাহরণস্বরূপ, এভাবে - a:hover - আমরা সেই অবস্থাটি ধরব যখন লিঙ্কের উপর মাউস কার্সার নিয়ে যাওয়া হয়। এই মুহুর্তে আমরা, উদাহরণস্বরূপ, লিঙ্কের রং পরিবর্তন করতে পারি বা এর আন্ডারলাইন সরাতে বা যোগ করতে পারি। :hover কনস্ট্রাকশনটিকে সিউডোক্লাস বলা হয়। সিউডোক্লাসগুলি উপাদানগুলির বিভিন্ন অবস্থা ক্যাচ করতে দেয়।

:hover ছাড়াও আরও সিউডোক্লাস রয়েছে যেমন :link, যা অদেখা লিঙ্ক ক্যাচ করে, এবং :visited, যা দেখা লিঙ্ক ক্যাচ করে। কিছু সাইটে ব্যবহারকারীদের দেখানোর জন্য এগুলি ব্যবহার করা হয় যে তারা কোথায় ছিল, আর কোথায় ছিল না। আরও আছে সিউডোক্লাস :active, যা নিম্নলিখিত অবস্থাটি ক্যাচ করে: উপাদানে মাউস ক্লিক করা হয়েছে, কিন্তু এখনও ছাড়া হয়নি।

নিম্নলিখিত উদাহরণে, :hover অবস্থায় লিঙ্কের আন্ডারলাইন সরানো হয়েছে, :link অবস্থায় লাল রং নির্ধারণ করা হয়েছে, :visited অবস্থায় - সবুজ, :active অবস্থায় - নীল। ফলস্বরূপ দেখা যাবে যে শুরুতে লিঙ্কটি লাল রংয়ের হবে, এতে ক্লিক করার পরে - সবুজ, যদি এতে মাউস দিয়ে ক্লিক করে ছাড়া না হয় - নীল, এবং যদি মাউস নিয়ে যাওয়া হয় -则 আন্ডারলাইন ছাড়া হয়ে যাবে:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>