آموزش ساخت باکس مخفی کننده ماوس

در این بخش برای شما یک آموزش کد نویسی جالب قرار میدم که تنها با استفاده از css نوشته شده،بله همونطور که از عنوان پست معلومه شما میتونید با خوندن مراحل این آموزش یه باکس درست کنید که وقتی کاربر ماوس رو روی اون میبره،علامت ماوس محو بشه!! برای آزمایش  عملکرد کد میتونید ماوس خودتون رو به روی کادر آبی رنگ زیر ببرید!!!!.....دیدید چه جالب بود،البته باید خودتون کاربردشو تو سایت پیدا کنید،وگرنه به عنوان یه کد بی مصرف باقی میمونه... پس در ادامه مطلب ما رو همراهی کنید.

برای ساخت این باکس طبق آموزش های قبلی ابتدا یه تگ style درست میکنیم تا کدهامون رو درون اون بزاریم،به این صورت:

<style>

</style>

بعد از این کار برای باکسمون یه id میسازیم،به صورت زیر:

<style>

#mousehide{background:#06F; width:250px; height:200px; border-radius:5px;}

</style>

بعد از این که باکسمون رو ساختیم باید بریم سراغ عنصر cursor که حالات مختلف ماوس رو برای ما به نمایش میزاره،ما میخوایم که وقتی یه کاربر ماوسشو برد روی این باکس،فلش ماوس مخفی بشه پس به کد بالا یه عنصر با خصوصیت زیر میدیم،به این صورت:

<style>

#mousehide{background:#06F; width:250px; height:200px; border-radius:5px; cursor:none;}

</style>

برای نمایش این کد هم کافیه به صورت زیر عمل کنید:

<div id="mousehide"></div>