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

আপনি আপনার ওয়েব পৃষ্ঠার একটি উপাদানের উপর প্রযোজ্য শৈলীগুলি পরিবর্তন করতে চাইতে পারেন যখন ব্যবহারকারী সেই উপাদানটির উপর ঘোরায়৷

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

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

সিএসএস নির্বাচক

CSS-এ, নির্বাচকরা HTML উপাদান নির্বাচন করতে ব্যবহার করা হয় যেখানে আপনি একটি ওয়েব পৃষ্ঠায় শৈলী প্রয়োগ করতে চান। নির্বাচকরা আপনাকে তাদের আইডি, শ্রেণী, গোষ্ঠী বা বৈশিষ্ট্যের উপর নির্ভর করে উপাদান নির্বাচন করতে দেয়, যাতে আপনি নির্দিষ্ট উপাদানগুলিতে নির্দিষ্ট শৈলী প্রয়োগ করতে পারেন।

উদাহরণস্বরূপ, ধরুন আপনি একটি HTML নথিতে সমস্ত

ট্যাগ একটি গরম গোলাপী পটভূমিতে প্রদর্শিত করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:

h1 {
	background-color: hotpink;
}

এই কোডে, আমরা

নির্বাচক ব্যবহার করি যা ওয়েব পৃষ্ঠার সমস্ত

ট্যাগ নির্বাচন করতে ব্যবহৃত হয়। তারপর, কোঁকড়া বন্ধনীর মধ্যে আবদ্ধ, আমরা ওয়েব পৃষ্ঠায়

ট্যাগগুলিতে যে স্টাইলটি প্রয়োগ করতে চাই তা নির্দিষ্ট করি৷

CSS :হোভার সিলেক্টর

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

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

আপনি :হোভার নির্বাচক ব্যবহার করতে চাইতে পারেন যেখানে পরিস্থিতির একটি বিস্তৃত পরিসর আছে. নির্বাচকের জন্য এখানে কয়েকটি সম্ভাব্য ব্যবহারের ক্ষেত্রে রয়েছে:

• যখন ব্যবহারকারী পাঠ্যের একটি লাইনের উপর মাউস করেন তখন পাঠ্যের রঙ পরিবর্তন করা হয়।
• ব্যবহারকারী যখন ছবিটির উপর মাউস নেয় তখন একটি ছবির আকার পরিবর্তন করা।
• ব্যবহারকারী বোতামের উপর মাউস দিলে একটি বোতামের রঙ পরিবর্তন করা।

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

:হোভার নির্বাচকের সিনট্যাক্স নিম্নরূপ:

selector:hover {
	// CSS rules
}

এখানে :হোভার সিনট্যাক্স:

• নির্বাচক হল উপাদানের পরিসর যেখানে :হোভার নির্বাচক প্রয়োগ করা হবে। সুতরাং, আপনি যদি চান যে :হোভার প্রভাবটি ট্রিগার করার জন্য যখনই একজন ব্যবহারকারী একটি

  উপাদানের উপর ঘোরায়, আপনি h3 নির্দিষ্ট করবেন .

• :হোভার ব্রাউজারকে নির্দেশ দেয় যে CSS নিয়মের শৈলীগুলি শুধুমাত্র তখনই প্রয়োগ করা উচিত যখন ব্যবহারকারী একটি নির্দিষ্ট উপাদানের উপর ঘোরাফেরা করছে। এই উপাদানটি নির্বাচক দ্বারা সম্পত্তি।
• CSS নিয়ম ব্যবহারকারী যখন নির্বাচক দ্বারা সংজ্ঞায়িত উপাদানগুলির উপর ঘোরায় তখন সেই শৈলীগুলি প্রয়োগ করা উচিত . উদাহরণস্বরূপ, আপনি পাঠ্যের জন্য ফন্টের আকার বা
  ট্যাগের পটভূমির রঙ নির্দিষ্ট করতে পারেন। অথবা আপনি একটি ক্ষেত্রের সীমানা ব্যাসার্ধ নির্দিষ্ট করতে পারেন।

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

:হোভার CSS উদাহরণ

:হোভার নির্বাচক ব্যবহার করা যেতে পারে এমন অনেক উপায় রয়েছে। নীচে আমরা কয়েকটি সাধারণ পরিস্থিতির মধ্য দিয়ে যেতে যাচ্ছি যেখানে :হোভার নির্বাচক কার্যকর হতে পারে৷

সিএসএস হোভার প্রভাব:একটি লিঙ্কের রঙ পরিবর্তন করুন

:হোভার নির্বাচক আমাদেরকে একটি লিঙ্কের রঙ পরিবর্তন করার অনুমতি দেয় যখন ব্যবহারকারী লিঙ্কের উপর ঘোরায়।

ধরুন আমরা একটি লিঙ্ক ডিজাইন করছি যাতে লেখা আছে ক্যারিয়ার কর্ম হোমপেজ এবং ব্যবহারকারীকে ক্যারিয়ার কর্ম সাইটে পাঠায়। এই লিঙ্কটি হালকা সবুজ রঙে প্রদর্শিত হতে সেট করা হয়েছে৷ আমাদের ওয়েব পেজে।

আমরা লিঙ্কটিকে কমলা-এ পরিবর্তন করতে চাই যখন ব্যবহারকারী তাদের কার্সারের সাথে লিঙ্কের উপর হভার করে। এই প্রভাব তৈরি করতে, আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

<html>

<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
  
<style>

a {
	color: lightgreen;
}

a:hover {
	color: orange;
}
<style>

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

আসুন আমাদের কোড ভাঙ্গা যাক।

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

প্রথম নিয়মটি আমাদের ওয়েব পৃষ্ঠার সমস্ত HTML ট্যাগের ক্ষেত্রে প্রযোজ্য। আমাদের নিয়ম সমস্ত ট্যাগের পাঠ্যের রঙ হালকা সবুজ এ সেট করে রঙ ব্যবহার করে সম্পত্তি।

দ্বিতীয় নিয়মটি ওয়েব পৃষ্ঠায় একটি ট্যাগের রঙ কমলাতে পরিবর্তন করে যখন ব্যবহারকারী ট্যাগের উপর ঘোরায়। এটি :হোভার নির্বাচক

<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>

<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>