PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش استفاده از هاور در css | اختصاصی وی بی ایران



DARKSKIES
2014/11/27, 11:31 PM
با سلام

اینبار با آموزش استفاده از هاور در css در خدمت شما عزیزان هستیم ..

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

هاور رو میتونیم در تمامی کلاس ها به کار ببریم اما اصول صحیح کد نویسی هاور به این شکل هستش

باید ابتدا کلاس مورد نظرتون رو که میخواید بهش هاور بدید پیدا کنید برای مثال

میخواید به قسمت Forumhead قالبتون خاصیت هاور رو اضافه کنید و فروم هد قالب شما کلسش به این شکل هستش


.forumhead

حالا برای نوشتن هاور برای این کلاس در قالبتون باید بنویسید


.forumhead:hover

بعد خاصیت های دلخواهتون رو بهش بدید

اما برای درک بیشتر یک مثال کامل میزنم

شما میخواید وقتی موس رو میبرید روی فروم هد انجمنتون رنگ بکگراند اون تغییر کنه

اولین قدم پیدا کردن کلاس هستش

این کلاس فروم هد ماست


.forumhead

حالا میخوایم به این قسمت خاصیت هاور رو اضافه کنیم به شکلی که بعد از اینکه موس بر روی فروم هد رفت بکگراند به قرمز تغییر کنه بعد از اینکه موس رو از اونجا کنار کشیدید دوباره به حالت اولیه برگرده

اینطور باید بنویسید



.forumhead:hover {
background:#F00;}

اما یک مثال دیگه

مثلا میخواید وقتی روی یک ساب فروم یا همون زیر مجموعه های انجمنتون میرید هم بکگراند تغییر کنه هم سایز نوشته ها کمی بزرگتر بشه

اول کلاس ساب فرومتون رو پیدا میکنید

این کلاس ساب فروم ما :


.subforum

بعد اینطوری اضافه میکنید



.subforum:hover {
font-size:16px !important;
Background:#F00 !important;
}

میبنید که ما اینجا از ساب فروم خواستیم تا بعد از رفتن موس روی اون اندازه ی فونتش به 16px و بکگراندش به رنگ قرمز در بیاد

به این شکل شما عزیزان میتونید به هر قسمتی که خواستید هاور اضافه کنید و جلوه های زیبایی به اون بدید

البته میشه خیلی افکت هارو بهشون اضافه کرد اما من فعلا همین طرز کارش رو نوشتم انشالله در آموزش های بعد درست کردن هاور های زیبا تری خواهم پرداخت

موفق باشید