این آموزش در تاریخ ۱۳۹۹/۰۵/۰۵ آپدیت شده است.
آموزش شبه کلاس hover در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس hover در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس hover در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) hover در CSS میتوان استایل دلخواه، برای لینک ها یا دیگر عناصر ( برای وقتی که ماوس میره روی اون عنصر ) در یک صفحه وب مشخص کرد.
بفرض مثال من میخوام وقتی ماوس رفت روی یک لینک ، رنگش تغییر کنه ( مثال شماره ۱ ) و یا مثلا وقتی رفت روی یک تصویر ، اون تصویر بصورت دایره ای بشه ( مثال شماره ۲ )
| نسخه | CSS1 |
|---|
Free-Learn
مثال از شبه کلاس hover در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : وقتی ماوس رفت روی لینک
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> a:hover{ background-color:yellow; color:#000; text-decoration:none; border-radius:40px; padding:4px; } </style> |
مثال شماره ۲ : وقتی ماوس رفت روی تصویر ، دایره ای بشه ( استفاده از ویژگی border-radius برای گرد کردن عنصر )
|
1 2 3 |
img:hover{ border-radius:50%; } |
مثال شماره ۳ : وقتی ماوس رفت روی تگ Div ( بزرگ شدن اندازه فونت متن + گرد کردن لبه های تگ Div )
|
1 2 3 4 5 6 7 |
div:hover{ background-color:#607D8B; text-decoration:none; border-radius:40px; padding:10px; font-size:20px; } |
مثال شماره ۴ : وقتی ماوس رفت روی باکس ، سایه زیرش ایجاد بشه ( استفاده از ویژگی box-shadow برای ایجاد سایه )
|
1 2 3 |
div:hover{ box-shadow: 2px 5px 30px rgba(0,0,0,.1); } |
مثال شماره ۵ : وقتی ماوس رفت روی باکس ، محتوای مخفی شده را نمایش میده ( استفاده از ویژگی display برای مخفی / آشکار کردن )
|
1 2 3 |
div:hover span{ display:block; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس hover در CSS پشتیبانی میکنند یا خیر.
- برای استفاده و عمل کردن این شبه کلاس در مرورگر اینترنت اکسپلورر ، بروی تمامی عناصر بجز ( لینک ها ) باید حتما DOCTYPE صفحه را تعریف کرده باشید.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | IE |
| hover: | ۴٫۰ | ۲٫۰ | ۹٫۶ | ۳٫۱ | ۷٫۰ |
Free-Learn
شکل نوشتاری شبه کلاس hover در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:hover { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
برای مشخص کردن رنگ لینک وقتی هنوز روش کلیک نشده میتوان از شبه کلاس link و وقتی روش کلیک شده از شبه کلاس visited و رنگ لینک در لحظه کلیک ماوس بروی لینک از شبه کلاس active استفاده کرد.
- طبق استاندارد نوشتاری باید از شبه کلاس hover بعد از شبه کلاس های link و visited ( اگه خواستید hover بکار ببرید ) همانند دستورات زیر استفاده نمایید.
|
1 2 3 |
a:link { ... } a:visited { ... } a:hover { ... } |
