cssblog.ir logo
S

states

حالت های قرارگیری موس روی عنصر، فوکوس و ...

عناصر دارای حالات مختلفی مانند حالت گرفتن موس روی عنصر، حالت بازدیده شده، فعال یا غیرفعال می‌باشند که هرکدام از این حالات را می‌توان از طریق سلکتورهای مخصوص آنها انتخاب نمود

حالت های (State) پرکاربرد CSS

آیا تابحال این سوال برایتان پیش آمده که در وبسایت‌ها چطور با گرفتن موس روی یک دکمه رنگ آن عوض شده و سایه آن به نوعی می شود که انگار تحت فشار فیزیکی قرار گرفته است؟ یا لینک‌هایی که در گوگل روی آنها کلیک نموده‌اید رنگ بنفش می گیرند. اینها همان state‌های مختلف عناصر هستند. state ها حالاتی هستند که عناصر می‌توانند با رخ دادن رویدادهای خاص در آن حالت قرار گرفته و مجددا با رخ دادن رویدادی دیگر از آن حالت خارج شوند.

برخی از حالاتی که در CSS استفاده می شود:

حالت شرح
hover حالت قرار گرفتن موس روی عنصر
focus حالت focus (تمرکز)
visited لینکی که قبلا در مرورگر بازدید شده
link لینک‌های بازدید نشده
invalid/valid حالت مجاز/غیرمجاز
enabled/disabled حالت عناصر مربوط به فرم‌های HTML که می توانند فعال/غیرفعال باشند
checked وقتی که یک دکمه رادیویی یا چک‌باکس انتخاب می‌شود (تیک می‌خورد)
active فعال (برای لینک‌ها)

لازم به ذکر است که همه عناصر نمی توانند همه حالات ها را بگیرند.

حالت hover

اگر بخواهیم با قرار گرفتن موس روی یک عنصر مشخصه های آن را تغییر دهیم. مثلا color یا background-color آن، می توانیم selector مخصوص این حالت را بنویسیم و فقط مشخصه‌هایی که تغییر خواهند کرد را مجددا با مقدار جدید دوباره می‌نویسیم.

حالت focus

حالت فوکوس همان حالتی است که مثلا یک فیلد ورودی (که در آن تایپ می کنید) در هنگام کلیک روی آن به آن حالت می رود. 

همچنین با استفاده از کلید tab در مرورگرهای دسکتاپ می توان به حالت فوکوس عناصر رفت.

مثلا:‌ در این مثال پس از کلیک روی فیلد ورودی tab بزنید و به روی دکمه بروید.

حالت visited

این حالت مخصوص تگ a (لینک) می باشد و احتمالا بارها آن را در گوگل مشاهده نموده اید. نحوه تغییر آن رنگ بنفش پیشفرض به این شکل است: 

حالت invalid

درHTML5 یک سری قوانینی برای انجام اعتبارسنجی در سمت کاربر و توسط مرورگر اضافه شد که بتوان فیلدهای ورودی را در همان سمت مرورگر اندکی کنترل کرد. نحوه کار به این شکل است که قوانین را بصورت Attribute ها به آن فیلد می‌دهیم و هنگامی که فرم submit شد این قوانین را مرورگر بررسی نموده در صورتی که نقض شده باشند امکان ثبت فرم را نمی دهد و جلوی آن رویداد را می گیرد. (لیست این خصلت ها)

با این توضیحات حالت invalid حالتی است که وقتی یک فیلد قانونی را نقش نموده است در آن حالت قرار می گیرد.

مثلا: فیلد زیر یک فیل ایمیل است و اگر مقدار آن یک ایمیل معتبر نباشد رنگ حاشیه آن قرمز رنگ می شود.

حالت active

وقتی که روی یک لینک کلیک می شود یک لحظه آن لینک در حالتactive قرار می گیرد.

همچنین در صورت نیاز می توان این حالت را برای مابقی عناصر نیز استفاده کرد

حالت link

این حالت برای لینک‌هایی فعال می شود که در صفحه قرار دارند و توسط کاربر مشاهده نشده اند (visitedنیستند)

نکته این حالت این است اگر قصد دارید تا آن را با حالتhover با هم استفاده کنید باید ابتدا حالتlink را بنویسید و سپس حالت hover را تا نتیجه مطلوب حاصل شود.

همچنین اگر بصورت کلی از :link استفاده شود و عنصری قبل آن نوشته نشود، تمام لینک های داخل صفحه که خصلتhref را دارند را انتخاب خواهد نمود و روی آنها تاثیر خواهد گذاشت.

:link {
	color: blue;
}

معمولا کمتر کسی چنین کاری را انجام می دهد. چرا که نتیجه آن معادل انتخاب عادی تمام a ها خواهد بود:

a {
	color: blue;
}

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند