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

برای نمایش عنصر <div> به محض قرارگیری ماوس بر روی علامت <span> استفاده کنید (مثل ابزار توضیحی):

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

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که پُست-کلاس را به طور کامل پشتیبانی می‌کند.

صفحات مرتبط

آموزش:CSS لینک

آموزش:CSS پُست-کلاس