مرجع CSS فارسی

PSEUDO-CLASS

hover:

شبه کلاسی است که برای انتخاب و استابل دهی به المان ها در حالتی که ماوس روی آن ها می رود، استفاده می شود.

دستگاه های بدون ماوس (Touch device) از این شبه کلاس پشتیبانی نمی کنند. استفاده از hover: ممکن است در این دستگاه ها تاثیرات ناخواسته ایی ایجاد کند. چون زمانی که توسط انگشت روی المان ها در این دستگاه ها کلیک می شود ، ممکن است برای چند ثانیه وضعیت hover: فعال شود.

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

hover: همچنین برای استایل دهی به لینک ها در کنار سایر شبه کلاس ها مثل focus: و active: و visited: نیز استفاده می شود.

ترتیب استفاده از شبه کلاس ها برای المان لینک به شکل زیر توصیه می شود.

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:focus {
/* style visited link */
}
a:hover { /* hover styles */ } a:active { /* active state styles */ }
سایر نکات

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

مثال ها

مثال هایی از کاربرد hover: در CSS و طراحی قالب سای:

a:link {
    color: skyblue;
    background-color: white;
}

a:hover {
    background-color: skyblue;
    color: white;
}
                
img:hover {
    transform: scale(1.5);
}
                
.element {
    opacity: .5;
    transition: opacity .5s;
}

.element:hover {
    opacity: 1;
}
                

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

دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید)

See the Pen :hover CSS examples by alishooti (@alishooti) on CodePen.0

نمونه ایی دیگر از کاربرد hover: در CSS

See the Pen :hover CSS examples 02 by alishooti (@alishooti) on CodePen.0

اگر مرورگر شما از خصوصیت transform  در CSS پشتیبانی کند. با رفتن ماوس روی باکس زیر ، افکت چرخشی را مشاهده خواهید کرد.

See the Pen :hover CSS example 03 by alishooti (@alishooti) on CodePen.0

پشتیبانی مرورگر

کروم ، سافاری ، اپرا ، فایرفاکس اینترنت اکسپلورر ، اندروید و آی اوس از hvoer: پشتیبانی می کنند .

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.