با سلام خدمت دوستان گل،در این بحث می خوایم با هم یاد بگیریم که چطوری از خاصیت hover در کد

نویسی های خودمون بهره ببریم،برای درک بهتر خاصیت این تگ می تونین ماوس

خود را روی کادر زیر ببرید(البته این فقط یکی از خاصیت های این تگه!!!)

خوب ما با استفاده از این خاصیت میتونیم کاری کنیم که وقتی کاربر ماوسش رو برد روی لینک،شی یا هرچیز دیگه ای که تو صفحه وبتون

هست،یه اتفاقی روی اون اشیا بیفته،مثلا میتونیم کاری کنیم که وقتی کاربر

ماوس رو برد روی یه لینک اون لینک به رنگ دیگه ای دربیاد..(امتحان کنید):

.hov{background:#306; width:35px; height:35px; border:1px solid #333; border-radius:3px;}

حالا

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

بیفته،من میخوام وقتی ماوس رفت روی شی،طولش افزایش پیدا کنه و رنگشم سبز

بشه،به این شکل یک خط دیگه به استایلمون اضافه میکنیم:

.hov{background:#306; width:35px; height:35px; border:1px solid #333; border-radius:3px;}

.hov:hover{background:green; width:320px;}

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

رو زیبا میکنه،مثل سایت خودم که منوهای بالای سایت(منوهای کشویی)رو با این

تگ ساختم،البته این اجزا رو میشه با جاوا اسکریپت هم ساخت،ولی ما وارد

بحثش نمیشیم...

برای فراخونی این کلاس به شکل زیر عمل میکنیم: