آموزش شبه کلاس hover در CSS

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

آموزش شبه کلاس hover در CSS

Free-Learn

شبه کلاس hover در CSS

با استفاده از شبه کلاس ( یا هم انتخابگر ) hover در CSS میتوان استایل دلخواه، برای لینک ها یا دیگر عناصر ( برای وقتی که ماوس میره روی اون عنصر ) در یک صفحه وب مشخص کرد.

بفرض مثال من میخوام وقتی ماوس رفت روی یک لینک ، رنگش تغییر کنه ( مثال شماره ۱ ) و یا مثلا وقتی رفت روی یک تصویر ، اون تصویر بصورت دایره ای بشه ( مثال شماره ۲ )

نسخه CSS1

Free-Learn

مثال از شبه کلاس hover در CSS

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

مثال شماره ۱ : وقتی ماوس رفت روی لینک

امتحان کنید

مثال شماره ۲ : وقتی ماوس رفت روی تصویر ، دایره ای بشه ( استفاده از ویژگی border-radius برای گرد کردن عنصر )

امتحان کنید

مثال شماره ۳ : وقتی ماوس رفت روی تگ Div ( بزرگ شدن اندازه فونت متن + گرد کردن لبه های تگ Div )

امتحان کنید

مثال شماره ۴ : وقتی ماوس رفت روی باکس ، سایه زیرش ایجاد بشه ( استفاده از ویژگی box-shadow برای ایجاد سایه )

امتحان کنید

مثال شماره ۵ : وقتی ماوس رفت روی باکس ، محتوای مخفی شده را نمایش میده ( استفاده از ویژگی display برای مخفی / آشکار کردن )

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس hover در CSS پشتیبانی میکنند یا خیر.

  • برای استفاده و عمل کردن این شبه کلاس در مرورگر اینترنت اکسپلورر ، بروی تمامی عناصر بجز ( لینک ها ) باید حتما DOCTYPE صفحه را تعریف کرده باشید.
نام انتخابگر Chrome Firefox Opera Safari IE
hover: ۴٫۰ ۲٫۰ ۹٫۶ ۳٫۱ ۷٫۰

Free-Learn

شکل نوشتاری شبه کلاس hover در CSS

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.

Free-Learn

نکات و توضیحات

برای مشخص کردن رنگ لینک وقتی هنوز روش کلیک نشده میتوان از شبه کلاس link و وقتی روش کلیک شده از شبه کلاس visited و رنگ لینک در لحظه کلیک ماوس بروی لینک از شبه کلاس active استفاده کرد.

  • طبق استاندارد نوشتاری باید از شبه کلاس hover بعد از شبه کلاس های link و visited ( اگه خواستید hover بکار ببرید ) همانند دستورات زیر استفاده نمایید.


Free-Learn

دریافت PDF یا پرینت این مطلب