CSS :hover 伪类

অর্থ এবং ব্যবহার

CSS :hover প্রত্যক্ষ প্রক্রিয়াসমূহকে মাউস হলে পড়ার সময় ইলেকট্রনকে নির্বাচন করার জন্য ব্যবহার করা হয়

টিপস::hover প্রত্যক্ষ প্রক্রিয়াসমূহকে সব ইলেকট্রনকেই ব্যবহার করা যেতে পারে

টিপস:কামনা করা হচ্ছে :link পরিদর্শিত না থাকা পাতার লিঙ্ক স্টাইল সেট করুন :visited পরিদর্শিত পাতার লিঙ্ক স্টাইল সেট করুন :active সক্রিয় লিঙ্কের স্টাইল সেট করুন

নোট:CSS ডিফাইনিশনে:hover এটা নিহিত করা তোমারা :link এবং :visited（যদি হোক）পরেই কার্যকর হবে！

প্রতিমান

উদাহরণ 1

মাউস হলে পড়ার লিঙ্ক স্টাইল নির্বাচন এবং সেট করুন：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2

মাউস হলে পড়ার <p>、<h1> এবং <a> ইলেকট্রন স্টাইল নির্বাচন এবং সেট করুন：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3

নির্বাচিত এবং অপরিদর্শিত, পরিদর্শিত, হলস্টক এবং সক্রিয় লিঙ্কের শৈলী নির্ধারণ করুন:

/* অপরিদর্শিত লিঙ্ক */
a:link {
  color: green;
}
/* পরিদর্শিত লিঙ্ক */
a:visited {
  color: green;
}
/* মাউস হলস্টক করা লিঙ্ক */
a:hover {
  color: red;
}
/* সক্রিয় লিঙ্ক */
a:active {
  color: yellow;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 4

লিঙ্ককে ভিন্ন শৈলী নির্ধারণ করুন:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 5

স্প্যান <span> ইলেকট্রনের উপর হলস্টক করে ডিভ <div> ইলেকট্রনকে দেখায় (টুলটিপপের মতো):

div {
  display: none;
}
span:hover + div {
  display: block;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 6

মাউস হলস্টক হয়ে 'ড্রপডাউন' মেনুকে দেখায় এবং লুকায়য়া করুন:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

আপনার নিজেই প্রয়াস করুন

CSS য়াক্রম

:hover {
  css declarations;
}

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই প্রকৃত প্রকৃতির প্রথম ব্রাউজার সংস্করণকে সম্পূর্ণভাবে সমর্থন করে বলে দেয়。

সংশ্লিষ্ট পাতা

শিক্ষাক্রম:CSS লিঙ্ক

শিক্ষাক্রম:CSS 伪类