pseudo-class :hover CSS

تعریف و استفاده

CSS :hover پseudo-classes برای انتخاب عناصر در حالت قرارگیری ماوس استفاده می‌شوند.

توضیح::hover پseudo-classes می‌توانند برای همه عناصر استفاده شوند، نه فقط لینک‌ها.

توضیح:لطفاً از :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;
}

جزئیات فنی

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

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

صفحات مرتبط

آموزش:لینک CSS

آموزش:کلاس‌های شبه CSS