حالت های مختلف نمایش یک آیتم و تغییراتی که با کلیک یا اشاره می توان در آن ایجاد کرد
سلام دوستان;
با یکی دیگه از آموزش های کدپز در خدمت شما دوستان هستیم
برای یک آیتم یا متن می توان حالتهای مختلفی در یک صفحه ی html ایجاد کرد مانند hover , focus , visited و … که در این متن می خواهیم به این حالتها بپردازیم.
1- حالت hover
اگر بخواهیم با قرار گرفتن نشانگر موس روی یک آیتم بعضی از مشخصه های آن مانند رنگ متن یا پس زمینه را تغییر دهیم , از hover استفاده می کنیم.
1 2 3 |
a:hover { background-color: yellow; } |
قطعه کدی که در بالا مشاهده می کنید مثالی ساده از استفاده ی حالت hover می باشد.
2- حالت focus
از این قابلیت برای استایل دهی به آیتمی که در معرض تمرکز کاربر قرار می گیرد که این عمل ممکن است با نشانگر موس یا دکمه tab صورت بگیرد.
1 2 3 4 |
a:focus { background-color: black; color: white; } |
یک مثال از focus را در بالا مشاهده می کنید.
3-حالت visited
Visited قابلیتی است که برای انتخاب و استایل دادن به مشخصه های لینکی که قبلا آن ها را مشاهده کرده ایم استفاده می شود.
این قابلیت فقط برای مشخصه هایی از که دارای ویژگی “href” باشند قابلیت اجرا دارد.
1 2 3 |
a:visited { color: green; } |
برای استفاده از قابلیت visited از تکه کدی که در بالا مشاهده می کنید به عنوان یک نمونه ساده می توانید بهره ببرید
4- حالت active
با استفاده از این قابلیت می توان برای یک مشخصه در حالت فعال آن استایل و فرم خاصی تعریف کرد.
استفاده از Active برای یک مشخصه باعث می شود استایلی که در این حالت تعریف کرده ایم برای آن مشخصه از زمان کلیک تا زمان رها کردن آن فعال شود.این قابلیت به کاربر نشان می دهد که کلیک کرده یا نه یا اینکه چند بار کلیک می کند.
1 2 3 4 5 |
p:active { background-color: red; } |
نمونه ای ساده از کد مورد نیاز برای اسفاده از حالت active را مشاهده می کنید.
آخرین مطلبی که در این متن باید به آن توجه کرد این مسئله است که در صورتی که بخواهیم از همه قابلیت هایی که به آن اشاره کردیم استفاده کنیم مناسب است ترتیبی که در زیر نوشته شده را رعایت کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
a:visited { } a:focus { } a:hover { } a:active { } |
امیدوارم مطالب بالا برای شما مفید واقع بشه و اگر خواستید بیشتر اطلاعات دریافت کنید به w3schools و stackoverflow مراجعه کنید.
موفق باشید.