CSS :hover সিলেক্টর: কিভাবে প্রয়োগ করবেন

CSS :hover সিলেক্টর একটি এলিমেন্টকে সিলেক্ট করে যখন আপনি আপনার কার্সর দিয়ে সেটার ওপর হোভার করেন। উদাহরণস্বরূপ, আপনি :hover ব্যবহার করে একটি লিংকের রং পরিবর্তন করতে পারেন যখন আপনি লিংকের ওপর হোভার করেন।

আপনি চাইতে পারেন আপনার ওয়েব পেজের কোনো এলিমেন্টে প্রয়োগ হওয়া স্টাইলগুলো পরিবর্তন হোক যখন ব্যবহারকারী সেটার ওপর হোভার করবে।

সেটায় CSS :hover সিলেক্টর কাজে লাগে। :hover সিলেক্টর আপনাকে এলিমেন্ট সিলেক্ট করতে দেয় যখন আপনি সেটার ওপর মাউস নেয়েন। এতে আপনি ব্যবহারকারী হোবার করলে স্টাইল প্রয়োগ করতে পারেন।

এই টিউটোরিয়ালে উদাহরণসহ CSS-এ সিলেক্টরর মৌলিক বিষয় এবং CSS :hover সিলেক্টর কীভাবে ব্যবহার করবেন তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল শেষ করলে আপনি :hover ব্যবহার করে এলিমেন্ট সিলেক্ট ও স্টাইল প্রয়োগ করতে দক্ষ হবেন।

CSS সিলেক্টরসমূহ

CSS-এ, সিলেক্টর ব্যবহার করে HTML এলিমেন্টগুলো সিলেক্ট করা হয় যাদের ওপর আপনি স্টাইল প্রয়োগ করতে চান। সিলেক্টরগুলো আপনাকে এলিমেন্ট তাদের আইডি, ক্লাস, গ্রুপ, বা অ্যাট্রিবিউট অনুযায়ী বাছাই করতে দেয় যাতে আপনি নির্দিষ্ট এলিমেন্টগুলোর ওপর নির্দিষ্ট স্টাইল প্রয়োগ করতে পারেন।

উদাহরণস্বরূপ, ধরুন আপনি একটি HTML ডকুমেন্টের সব <h1> ট্যাগকে হট পিংক পটভূমিতে দেখাতে চান। আপনি নিচের কোড ব্যবহার করে এটি করতে পারেন:

h1 {
  background-color: hotpink;
}

এই কোডে, আমরা <h1> সিলেক্টর ব্যবহার করেছি যা ওয়েব পেজের সব <h1> ট্যাগ সিলেক্ট করতে ব্যবহৃত হয়। তারপর, কার্লি ব্র্যাকেটের মধ্যে, আমরা वो স্টাইল নির্দিষ্ট করেছি যা আমরা ওয়েব পেজের <h1> ট্যাগগুলোর ওপর প্রয়োগ করতে চাই।

CSS :hover সিলেক্টর

CSS :hover সিলেক্টর একটি এলিমেন্ট সিলেক্ট করে যখন আপনি আপনার মাউস দিয়ে সেটার ওপর হোভার করেন। :hover যেকোনো CSS এলিমেন্টে ব্যবহার করা যায়, কিন্তু এটি সাধারণত লিংকে ব্যবহৃত হয়। :hover সিলেক্ট করতে চাওয়া এলিমেন্টের নামের পরে লিখতে হয়, যেমন লিংকের জন্য a:hover।

:hover সিলেক্টর ব্যবহারের ব্যাপক পরিস্থিতি রয়েছে। কিছু সম্ভাব্য ব্যবহারের ক্ষেত্র নিচে দেওয়া হলো:

• ব্যবহারকারী কোনো টেক্সট লাইনের ওপর মাউস নেলে টেক্সট রং পরিবর্তন করা।
• ব্যবহারকারী কোনো ইমেজের ওপর মাউস নেলে ইমেজের আকার পরিবর্তন করা।
• ব্যবহারকারী কোনো বাটনের ওপর মাউস নেলে বাটনের রং পরিবর্তন করা।

এই সব ব্যবহার ক্ষেত্রে, ব্যবহারকারী যখন তাদের কার্সর দিয়ে কোনো এলিমেন্টের ওপর হোভার করে তখন একটি নির্দিষ্ট স্টাইল প্রয়োগ হয়।

:hover সিলেক্টরার সিনট্যাক্স নিচের মত:

selector:hover {
  // CSS rules
}

:hover সিনট্যাক্সের প্রধান উপাদানগুলো:

• selector হলো এলিমেন্টের পরিসর যেগুলোর ওপর :hover সিলেক্টর প্রয়োগ হবে। তাই, আপনি যদি চান ব্যবহারকারী <h3> এলিমেন্টের ওপর হোবার করলে :hover ইফেক্ট ট্রিগার হোক, তবে আপনি h3 নির্দিষ্ট করবেন।
• :hover ব্রাউজারকে নির্দেশ করে যে CSS নিয়মের স্টাইলগুলো শুধু তখন প্রয়োগ হবে যখন ব্যবহারকারী selector প্রপার্টি দ্বারা সংজ্ঞায়িত নির্দিষ্ট এলিমেন্টের ওপর হোভার করছেন।
• CSS rules হলো वो স্টাইলগুলো যা প্রয়োগ হবে যখন ব্যবহারকারী selector দ্বারা সংজ্ঞায়িত এলিমেন্টগুলোর ওপর হোভার করবেন। উদাহরণস্বরূপ, আপনি টেক্সটের ফন্ট আকার বা <div> ট্যাগের পটভূমির রং নির্দিষ্ট করতে পারেন। অথবা আপনি <input> ফিল্ডের বর্ডার রেডিয়াস নির্দিষ্ট করতে পারেন।

চলুন কিছু উদাহরণের মাধ্যমে দেখি আপনি কীভাবে একটি ওয়েব ডেভেলপার হিসেবে CSS :hover সিলেক্টর ব্যবহার করতে পারেন।

:hover CSS উদাহরণসমূহ

:hover সিলেক্টর ব্যবহারের অনেক পদ্ধতি রয়েছে। নিচে আমরা :hover সিলেক্টর ব্যবহারের কিছু সাধারণ পরিস্থিতি দেখব।

CSS Hover ইফেক্ট: লিংকের রং পরিবর্তন

:hover সিলেক্টর আমাদের লিংকের রং পরিবর্তন করতে দেয় যখন ব্যবহারকারী লিংকের ওপর হোভার করে।

ধরুন, আমরা Career Karma homepage টেক্সটসহ একটি লিংক ডিজাইন করছি যা ব্যবহারকারীকে Career Karma সাইটে পাঠাবে। এই লিংক আমাদের ওয়েব পেজে lightgreen রঙে দেখাবে।

আমরা চাই ব্যবহারকারী লিংকের ওপর কার্সর রাখলে লিংকের রং orange হয়ে যাক। এই ইফেক্ট তৈরির জন্য আমরা নিচের কোড ব্যবহার করতে পারি:

<html>
<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
<style>
a {
  color: lightgreen;
}
a:hover {
  color: orange;
}
</style>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমাদের কোড ভাঙে দেখা যাক।

আমাদের HTML ফাইলে, আমরা <a> ট্যাগ ব্যবহার করে Career Karma হোমপেজের লিংক সংজ্ঞায়িত করেছি। তারপর, আমাদের CSS কোডে, আমরা দুটি নিয়ম সংজ্ঞায়িত করেছি।

প্রথম নিয়ম আমাদের ওয়েব পেজের সব HTML <a> ট্যাগে প্রয়োগ হয়। আমাদের নিয়ম color প্রপার্টি ব্যবহার করে সব <a> ট্যাগের টেক্সট রং lightgreen সেট করে।

দ্বিতীয় নিয়ম একটি <a> ট্যাগের রং orage করে দেয় যখন ব্যবহারকারী <a> ট্যাগের ওপর হোভার করে। এটি :hover সিলেক্টর ব্যবহার করে অর্জিত হয়েছে।

তাই, যখন ব্যবহারকারী Career Karma homepage টেক্সটের ওপর হোভার করবে, লিংকের রং orage হয়ে যাবে।

CSS Hover ইফেক্ট: টেক্সট ব্লক দেখানো

:hover সিলেক্টর একটি টেক্সট ব্লক দেখানোর জন্যও ব্যবহার করা যায় যখন ব্যবহারকারী একটি টেক্সট লাইনের ওপর হোভার করে।

ধরুন, আমরা Career Karma ওয়েবসাইটের জন্য একটি Frequently Asked Questions পেজ ডিজাইন করছি। ব্যবহারকারী কোনো প্রশ্নের ওপর হোবার করলে একটি টেক্সট ব্লক দেখাবে যা তাদের প্রশ্নের উত্তর দেবে। আমরা নিচের কোড ব্যবহার করে একটি উদাহরণ প্রশ্ন তৈরি করতে পারি:

<html>
<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>
<html>
<style>
div {
  display: none;
  background-color: orange;
  padding: 10px;
}
span:hover + div {
  display: block;
}
</style>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমরা <span> ট্যাগ ব্যবহার করে প্রশ্ন "What is Career Karma?" তৈরি করেছি যা আমাদের ওয়েব পেজে দেখাবে। তারপর, আমরা একটি <div> ট্যাগ ব্যবহার করেছি যেটিতে প্রশ্নের উত্তর রয়েছে।

আমাদের CSS ফাইলে, আমরা আমাদের <div> ট্যাগের জন্য নিচের স্টাইলগুলো ব্যবহার করেছি:

• display: none, যা আমাদের <div> ট্যাগকে অদৃশ্য করে।
• background-color: orange, যা আমাদের <div> ট্যাগের পটভূমির রং orage সেট করে।
• CSS padding: 10px, যা আমাদের <div> ট্যাগের কন্টেন্ট এবং এর বর্ডারের মধ্যে ১০px গ্যাপ তৈরি করে।

তারপর আমরা span:hover + div সিলেক্টর ব্যবহার করে একটি নিয়ম সংজ্ঞায়িত করেছি। এই নিয়ম আমাদের <div> ট্যাগের display নিয়মকে block এ পরিবর্তন করে, যা এটিকে দৃশ্যমান করে। তাই, যখন ব্যবহারকারী আমাদের <span> ট্যাগের ওপর হোভার করবে (যেটি span:hover দ্বারা চিহ্নিত), <div> ট্যাগটি দৃশ্যমান হয়ে যাবে।

ইমেজ পরিবর্তন: CSS On Hover

:hover সিলেক্টর ব্যবহারের আরেকটি পরিস্থিতি হলো ওয়েব পেজের ইমেজ পরিবর্তন করা। ইমেজটি পরিবর্তন হবে যখন ব্যবহারকারী তাদের কম্পিউটার কার্সর দিয়ে ইমেজের ওপর হোভার করবে।

ধরুন, আমরা একটি স্থানীয় কফি শপের ওয়েবসাইট ডিজাইন করছি। ব্যবহারকারী তাদের About পেজের কফির স্টক ইমেজের ওপর হোবার করলে, একটি নতুন ইমেজ বিদ্যমান ইমেজকে রিপ্লেস করবে। নতুন ইমেজটি হবে একটি ক্যাফের স্টক ইমেজ।

আমরা নিচের কোড ব্যবহার করে ইমেজ হোভার ইফেক্ট অর্জিত করতে পারি:

<html>
<img height="750" width="1250" class="aboutImage" />
<html>
<style>
.aboutImage {
  background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}
.aboutImage:hover {
  background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
</style>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমরা একটি <img> ট্যাগ সংজ্ঞায়িত করেছি যা ৭৫০px উচ্চতা এবং ১২৫০px প্রস্থের একটি ইমেজ তৈরি করে। ট্যাগে দেওয়া ক্লাসের নাম aboutImage।

আমাদের CSS ফাইলে, আমরা দুটি নিয়ম ঘোষণা করেছি।

প্রথম নিয়ম .aboutImage ক্লাস নামযুক্ত এলিমেন্টে দেখানোর জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করে। আমরা একটি কফির স্টক ফটো ব্যাকগ্রাউন্ড ইমেজ হিসেবে ব্যবহার করেছি।

দ্বিতীয় নিয়ম, .aboutImage:hover, ব্যবহারকারী যেই এলিমেন্টের ওপর হোবার করছেন সেটির .aboutImage ক্লাসের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করে। যে নতুন ইমেজটি দেখাবে সেটি একটি ক্যাফের স্টক ইমেজ।

:Hover সিলেক্টরার অন্যান্য ব্যবহার

আমরা আগে আলোচনা করেছি, :hover সিলেক্টর ব্যবহারের অনেক পরিস্থিতি রয়েছে। আপনি যদি :hover সিলেক্টরার আরও উদাহরণ খুঁজছেন, তবে আমরা নিচের Career Karma টিউটোরিয়ালগুলো দেখার পরামর্শ দিই:

• CSS Transition: একটি গাইড কিভাবে ট্রানজিশন তৈরি করবেন যা দেখাবে যখন ব্যবহারকারী ওয়েব পেজের কোনো এলিমেন্টের ওপর হোবার করবেন।
• CSS Navigation Bar: CSS ব্যবহার করে নেভিগেশন বার তৈরি করার গাইড।
• CSS Dropdown Menu: CSS ব্যবহার করে ড্রপডাউন মেনু তৈরি করার গাইড।

হোভার সিলেক্টর বাটন হোভার ইফেক্ট তৈরি করতেও ব্যবহৃত হয়। এই ইফেক্টগুলো বাটনের চেহারা পরিবর্তন করে এবং হোভার অ্যানিমেশন ট্রিগার করে।

আমাদের CSS সিলেক্টর সম্পর্কিত একটি গাইডও রয়েছে যা আপনি অন্যান্য সিলেক্টর সম্পর্কে জানতে পড়তে পারেন।

উপসংহার

CSS :hover সিলেক্টর আপনাকে একটি এলিমেন্ট সিলেক্ট করতে দেয় যখন ব্যবহারকারী কার্সর দিয়ে সেটার ওপর হোভার করে। একবার এলিমেন্ট সিলেক্ট হলে, আপনি একটি নতুন সেট স্টাইল প্রয়োগ করতে পারেন। এই স্টাইলগুলো দৃশ্যমান থাকে যতক্ষণ না ব্যবহারকারী তাদের কার্সর দিয়ে এলিমেন্টের ওপর থেকে হোবার বন্ধ করে।

এই টিউটোরিয়ালে উদাহরণসহ CSS সিলেক্টরর মৌলিক বিষয় এবং :hover সিলেক্টর কীভাবে ব্যবহার করবেন তা আলোচনা করা হয়েছে। এখন আপনি CSS এক্সপার্টের মতো :hover সিলেক্টর ব্যবহার করতে পারবেন!

শীর্ষ CSS শিক্ষামূলক সংস্থান, কোর্স, এবং বই সম্পর্কে পরামর্শের জন্য আমাদের How to Learn CSS গাইড দেখুন।