فهرست

هاور چیست؟

هاور یک افکت جایگزین شونده در طراحی گرافیکی استی است که با عملکرد موس بر روی المان ها اجرا می شود. به این صورت که زمانی که شما یک المان در سایت خودتان مانند یک تصویر دارید و بعد از این که نشانگر موس مخاطب روی آن قرار می گیرد، المان تغییر می کند، می چرخد، رنگش عوض می شود و… شما از هاور استفاده کرده اید. برای مثال اگر دقت کرده باشید گاهی ممکن است شما در یک سایت یک دکمه را مشاهده کنید. این دکمه نظر شما را جلب می کند و رنگ آن هم قرمز است. زمانی که شما نشانگر موستان را بر روی آن می برید می بینید که رنگ دکمه از قرمز به مشکی تغییر می کند. این موضوع شاید موضوع کوچکی باشد اما نشان می دهد که سایت شما زنده و فعال است و انگار می فهمد که دارید با آن ارتباط برقرار می کنید.

هاور ها تقریبا بر روی تمام المان های سایت اعم از متون، عکس ها، دکمه ها و… قابل اجرا می باشد و اگر در جای درست استفاده شود می تواند جذابیت زیادی را به همراه داشته باشد. هاور ها معمولا با CSS نوشته و تعیین می شوند به این صورت که در CSS حالت اصلی المان تعریف شده و سپس برای همان مورد از CSS یک Alternation تعریف می شود و حالت هاور بوجود می آید.

هاور چه تاثیری بر تصاویر سایت می گذارد؟

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

هاور بر روی لینک ها چگونه عمل می کند؟

یکی از مرسوم ترین استفاده از هاور ها بر روی لینک سایت ها می باشد. استفاده از هاور بر روی لینک ها نه فقط جذاب، بلکه لازم است. به این دلیل که هاور شدن لینک ها نشان می دهند که خطی که زیر متن انکرتکست کشیده شده است صرفا یک خط کشی ساده نیست و با عوض شدن حالت متن، شما می توانید بفهمید که یک لینک در این متن وجود دارد و بخواهید که بر روی آن کلیک کنید. یادتان هست که گفتیم لینک ها چقدر بر روی سئو سایت شما تاثیر دارند؟ حال تصور کنید که هاور با اینکه شاید کار کم اهمیتی به نظر می رسد، چقدر قرار است با همین عملکردش بر روی لینک ها به سئو سایت ما کمک بکند.

انواع هاور ها به چه صورت است؟

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

نوع زوم: این نوع بیشتر برای تصاویر استفاده می شود که زمانی که کاربر نشانگر موس را روی تصویر می برد، تصویر زوم می شود و کاربر می تواند جزئیات بیشتری را مشاهده کند.

متن ها Slide Up: با رفتن نشانگر موس بر روی تصویر، یک متن در بالای آن ها ظاهر می شود که معمولا اطلاعاتی را درباره تصویر به مخاطب می دهد یا ممکن است یک آیتم قابل کلیک کردن در آن ها وجود داشته باشد.

دکمه “Read more”: در این نوع هاور ما یک تصویر داریم که شامل متن و پس زمینه می باشد. حال این متن ممکن است یک عنوان جذاب باشد که کاربر را کنجکاو کند. ما با قرار دادن دکمه Read More یا بیشتر بخوانید مخاطب را مجاب می کنیم که روی آن کلیک کند و با هاور متن بیشتری نمایش داده شود.

چگونه یک افکت هاور بسازیم؟

هم HTML و هم CSS در سایت با کد ها تعریف می شوند. هرکدام از المان هایی که ما در سایت داریم کد های کلیدی خودشان را دارند. ما بوسیله CSS و کلید های آن می توانیم هاور را برای یک المان فعال کنیم. به نظر کار ساده ای می رسد اما چندان هم ساده نیست و برای اجرای آن باید حداقل کمی از دانش برنامه نویسی و کد نویسی سر در بیاوریم. برای اینکه به المان خودمان هاور اضافه کنیم می توانیم از کد زیر استفاده کنیم:

مزیت های هاور چیست؟

حال که از تاثیر هاور در طراحی سایت با خبر شدیم بهتر است به مزایای دیگر آن نیز اشاره کنیم. تمامی این مزایا شاید کوچک به نظر برسند اما مجموع آن ها در کنار یکدیگر به ما این اطمینان را می دهند که اگر تا به حال از هاور استفاده نمی کردیم، از حالا به بعد بهتر است که کمی بیشتر از آن استفاده کنیم و در سایت خودمان از این جذابیت بی بهره نمانیم. این مزیت ها شامل موارد زیر می شوند: