loading...

سه نفری | بزرگترین سایت تفریحی آموزشی ایران

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

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

admin بازدید : 9319 دوشنبه 08 ارديبهشت 1393 نظرات (19)

با سلام خدمت دوستان گل،در این بحث می خوایم با هم یاد بگیریم که چطوری از خاصیت 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>


مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط داوود در تاریخ 5 سال پیش و 22:10 دقیقه ارسال شده است

سلام خسته نباشید میخواستم بپرسم داخل تگ استایل که در داخل تگ هامون تعریف میکنیم میشه هاور نوشت
مثال:

پاسخ : کدتون ارسال نشده...
ولی بله موردی نداره...
گرچه از لحاظ کدنویسی کدهای خارج از فایل css مشکل دارن...

این نظر توسط ensieh در تاریخ 5 سال پیش و 12:16 دقیقه ارسال شده است

باسلام و خسته نباشید
من تو نوع نوشتن زیر منوها به مشکل برخوردم. یعنی میخوام تا روی هر قسمت از منو رفتم زیر منو نشون داده بشه و همین طور زیرمنوهای زیرین آن.
پاسخ : مشکلتون رو توی انجمن مطرح کنید تا کد مورد نظر به شما داده بشه...
اینجا نمیشه کدها رو ارسال کرد...

این نظر توسط fardin در تاریخ 6 سال پیش و 16:11 دقیقه ارسال شده است

سلام آموزشتون عالی بود فقط ای کاش کدهای دیگه هم میگفتین با خاصیتشون فقظ دوتا مثال زدید
پاسخ : سلام دوست عزیز...
سعی میکنم توی ورژن های بعدی اصلاحش کنم...

این نظر توسط امیر در تاریخ 6 سال پیش و 23:38 دقیقه ارسال شده است

سلام
اموزشتون خیلی خوب بود
فقط هاور های اماده وجود دارن ک بتونیم از اونا استفاده کنیم؟
مرسی
پاسخ : خواهش میکنم...
وظیفه بود...
هست ولی باید بگردید...
من یه سری سایت رو بلد بودم اما یادم رفته...:
https://www.google.com/search?q=transition+maker&ie=utf-8&oe=utf-8

این نظر توسط فریبرز در تاریخ 7 سال پیش و 12:53 دقیقه ارسال شده است

سلام ببخشیدمن یه کدی رو با خاصیت hoverنوشتم که وقتی ماوس میره روش کمی به پاییین کشیده میشه ولی میخوام وقتی که کشیده شد یه divیا یک مطلب توش ایجاد بشه
میخواستم بدونم چطور این کارو رو باید انجام بدم
البته من فایل cssو html رو اپلود کردم واین هم ادرسش اگه ممکنه به من توضیح بدین
خیلی ممنون
لطفا جواب رو به ایمیلم ارسال کنید اگر مشکلی نیست
http://worldup.ir/images/wwfvyjav1e05jozm1k.rar
پاسخ : با سلام خدمت شما همراه گرامی...
این چیزی که گفتید مشکل نیست...
فقط باید جایی باشه که بشه توضیح داد...
توی ایمی نمیشه...
شما سعی کنید یک تاپیک بزنید توی انجمن تا کمک کنم...
چون چیزی که ساختید یکی از ترفند های css هم هست...
و کمی نیاز به توضیحات داره...

این نظر توسط Amin Lord در تاریخ 7 سال پیش و 10:14 دقیقه ارسال شده است

داداش ممنون کارت حرف نداش ممنون

این نظر توسط در تاریخ 7 سال پیش و 16:57 دقیقه ارسال شده است

ممنون
مفید بود.
( اموزش و فرق id و class رو هم بزار )
یادته که چقدر بدبختی کشیدی تا یادم دادی ؟

این نظر توسط تبلت فون در تاریخ 7 سال پیش و 22:07 دقیقه ارسال شده است

ممنون مفید بود
پاسخ : خواهش میکنم عزیز...
موفق باشید

این نظر توسط maryam در تاریخ 7 سال پیش و 14:43 دقیقه ارسال شده است

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

این نظر توسط بیتا در تاریخ 8 سال پیش و 8:31 دقیقه ارسال شده است

سلام می خواستم بپرسم توی مثال بالا که زدید میشه وقتی که کادر آبی رنگ باز میشه داخلش مطلب هم بذاریم ؟
واینکه چطور این خاصیت رو به divها اضافه کنم ؟؟؟شکلک
پاسخ : باسلام؛بله میشه مطلب هم گذاشت...برای اینکه این استایل رو به یه div خاص (با نام خاص) بدین،کافیه براش یه کلاس انتخاب کنین(مثل نمونه:hov) بعدش بهش استایل بدین و توی کدتون استفاده کنین...ولی اگه می خواین تمامی تگ های div اینطوری بشن(بعید میدونم اینکارو کنین) کافیه توی استایل به جای .hov اینو اضافه کنید:div
(بدون هیچ نقطه ای در کنار) ولی اینکارو نکنین...اگه متوجه نشدین یه تاپیک تو انجمن ایجاد کنین تا کمکتون کنم...آخه اینجا نمیشه از کد استفاده کرد...ممنون


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 182
  • کل نظرات : 544
  • افراد آنلاین : 2
  • تعداد اعضا : 1165
  • آی پی امروز : 66
  • آی پی دیروز : 172
  • بازدید امروز : 133
  • باردید دیروز : 579
  • گوگل امروز : 3
  • گوگل دیروز : 2
  • بازدید هفته : 133
  • بازدید ماه : 9,537
  • بازدید سال : 62,805
  • بازدید کلی : 9,887,539