شبه کلاس hover: در CSS

:hover CSS Pseudo-class

شبه کلاس hover: در CSS، زمانی فعال می شود که کاربر ماوس را روی عنصر مورد نظر ببرد.

hover: یک شبه کلاس داینامیک (پویا) است و زمانی فعال می شود که کاربر با ماوس روی عنصر مورد نظر اشاره کند. این شبه کلاس معمولا بدین منظور مورد استفاده قرار می گیرد تا با بازخورد تصویری به کاربر نشان دهد که او بر روی عنصر مورد نظر اشاره کرده است. همچنین این شبه کلاس برای نشان دادن محتوای ثانویه مانند باز شدن منو ها و تب ها کاربرد فراوان دارد.

استایل هایی که توسط شبه کلاس hover: به لینک اختصاص میابند توسط شبه کلاس active: نادیده گرفته می شوند. برای استایل دهی لینک ها به شیوه درست باید به ترتیب زیر استایل دهی کرد:

LVHA -> :link – :visited – :hover – :active

css

a:link {
    /* استایل دهی به لینک*/
}

a:visited {
    /* استایل دهی به لینک های دیده شده */
}

a:hover {
    /* استایل دهی به هاور */
}

a:active {
    /* استایل دهی به حالت فعال لینک */
}

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

در مثال ساده زیر عملکرد شبه کلاس hover: را مشاهده میکنیم:

html

<a href="#">Try hovering over this link.</a>

css

 body {direction: rtl; font-family:tahoma}
a {
   background-color: powderblue;
   transition: background-color .5s;
}
a:hover {
   background-color: gold;
}

مشاهده و ویرایش کد در حالت تمام صفحه

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

در مثال دیگری نحوه عملکرد شبه کلاس hover: را در ساختار منو میبینیم:

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.