هاور و سایه ها در طراحی سایت

در صفحه ­سازهای وردپرس امکان اضافه کردن Hover وجود ندارد. توصیه می­ شود برای ایجاد افکت ­های Hover به عناصر سایت از افزونه مداد زرد استفاده کنید. تهیه افزونه مداد زرد

آموزش Hover با افزونه مداد زرد

برای اضافه کردن Hover به عناصر با افزونه مداد زرد، در محیط ویرایش افزونه مداد زرد، المان­ هایی که قصد دارید ویژگی Hover را به آن ها اضافه کنید انتخاب نمایید. برای آموزش ایجاد تغییرات CSS در سایت با افزونه مداد زرد کلیک کنید.

از منوی سمت راست، روی نام مخصوص المان کلیک کنید.  وضعیت (States) آن را در حالت Hover قرار دهید. حال هر تغییری بر روی المان ایجاد کنید به عنوان Hover در نظر گرفته می­شود.

برای مثال رنگ پس­ زمینه المان را وقتی موس روی آن قرار می­گیرد تغییر دهید. البته می توانید برای المان از قسمت Shadow سایه تعیین کنید.

پس از ایجاد تغییر و ذخیره آن، با حرکت موس روی عناصر سایت در مرورگر می­توانید تغییرات افکت Hover را مشاهده نمایید.

همان طور که گفتیم افزودن افکت­ های Hover به عناصر سایت، باعث تعامل بیشتر کاربران می­شود. ذکر این نکته خالی از لطف نیست که استفاده بیش از حد این افکت ­ها و برای تمامی المان­ ها نیز توصیه نمی­شود.