آموزش خاصیت hover در css

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

(این آموزش به خواسته کاربر گرامی آقا محمد در سایت قرار گرفت)

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

سایت سه نفری دات آی آر

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

شما میتونین این خاصیت رو روی اشیای موجود صفحه وبتون پیاده کنین،به این صورت:

اول باید یه کلاس یا آی دی مشخص بسازیم(اسمش بستگی به خودتون داره،من اسم کلاسمو میزارم hov):

<style>

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

</style>

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

<style>

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

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

</style>

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

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

<div class="hov"></div>