CSS :active کا سائیکل

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

CSS :active پنهان‌کننده‌ها برای انتخاب و تنظیم شکل عناصر در حال فعال شدن استفاده می‌شوند.

:active پنهان‌کننده‌ها معمولاً برای <a> و <button> عناصر. هنگامی که کاربر روی لینک کلیک می‌کند، لینک فعال می‌شود؛ همین طور برای دکمه‌ها.

توضیح:استفاده کنید :link شکل لینک در صفحه نادیده گرفته شده را با استفاده از :visited شکل لینک در صفحه دیده شده را با استفاده از :hover شکل لینک در حال نگاه کردن را تنظیم کنید.

توجه داشته باشید:در تعریف CSS،:active باید در :hoverباید (اگر وجود دارد) بعد از آن فعال شود!

مثال

مثال 1

شکل‌های مختلف برای لینک‌های فعال را انتخاب و تنظیم کنید:

a:active {
  رنگ پس‌زمینه: زرد;
}

آزمایش کنید

مثال 2

شکل‌های مختلف برای <button> در حال کلیک را انتخاب و تنظیم کنید:

button:active {
  رنگ پس‌زمینه: صورتی;
}

آزمایش کنید

مثال 3

شکل‌های مختلف برای <p>، <h1> و <a> در حال کلیک را انتخاب و تنظیم کنید:

p:active, h1:active, a:active {
  رنگ پس‌زمینه: زرد;
}

آزمایش کنید

مثال 4

شکل‌های مختلف برای لینک‌های غیر دیده شده، دیده شده، روی آن و فعال را انتخاب و تنظیم کنید:

/* لینک نادیده گرفته شده */
a:link {
  رنگ: سبز;
}
/* لینک دیده شده */
a:visited {
  رنگ: سبز;
}
/* لینک با موس روی آن */
a:hover {
  رنگ: قرمز;
}
/* لینک فعال */
a:active {
  رنگ: زرد;
}

آزمایش کنید

مثال 5

شکل‌های مختلف برای لینک‌ها تنظیم کنید:

a.ex1:hover, a.ex1:active {
  رنگ: قرمز;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

آزمایش کنید

زبان CSS

:active {
  اظهارات css;
}

جزئیات فنی

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

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

صفحات مرتبط

تدریس:لینک CSS

تدریس:کامپوننت CSS

تدریس:CSS پنهان‌کننده