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

شعار سایت : به سه نفر کمک کنید،و از اون سه نفر هم بخواهید به سه نفر دیگه کمک کنن...

خبر رسان سه نفری
  • تست خوانندگی در سه نفری...(ببینم...)- 1395/04/18
  • هاست با پشتیبانی 24 ساعته...(ببینم...)- 1395/03/25
  • قالب جدید سه نفری رونمایی شد...(ببینم...)- 1395/03/03
☼ آمارکده سه نفری ☼
اطلاعات آماری

با توجه به گزارشات واصله از سرور رزبلاگ،آمار امروز بدین شرح میباشد...:

به طور کل تا این ساعت 254 نفر توی سایت حضور به هم رسوندن...

بازدید دیروزمون : 6,161

حالا اگه بخواهیم دقیقتر حساب کنیم به این شکل میشه...:

از این تعداد،1 نفر از گوگل اومدن مهمونی...

ورودی گوگل دیروزمون : 52

و 128 نفر هم با آی پی های متغیر وارد شدن...

آی پی های دیروز : 3550

راستی آمار کاربرامونم داریم...میگی نه ببین...:

کلاً 943 نفر تو سایت عضون...

بله ما یه ایطور چیزایی تو خودمون داریم...

کلاً توی سه نفری 182 تا پست ارسال شده،مفیدناااا...

از خدا که پنهون نیست،از شما چه پنهون...

همین الآن که شما اینجایی،23 نفر دیگه هم آنلاینن...

مثل خودم اهل آماریااا...خخخخ

بیا اینم بقیه آمار...:

کلاً تا به امروز 7,867,345 نفر از سایت مستفیذ شدن...

این ماه هم تا الآن 105,990 نفر بازدید داشتیم...

خدا رو شکر راضی هم هستیم...

بازم امری بود در خدمتت هستم...23.20.86.177

سلام به همگی...

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

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

اما برای تفریح هم وقت داریم...:)

هر جوری میتونین توی سایت رفتار کنین،ولی مطابق با قوانین باشه دیگه...

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

هر مشکلی هم بود بگید تا حلش کنیم...

اگه کد خاصی هم خواستید توی انجمن تاپیک بزنید و درخواست بدید...

دیگه زیاد حرف نمیزنم،فعلاً سایت رو بررسی کنید و لذت ببرید...

تفاضل آمار بازدید دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
تفاضل آمار گوگل دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
تفاضل آمار آی پی دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
☼ مطلب کده سه نفری ☼
پست های سایت
تبلیغات
Advertising Advertising Advertising
تبلیغات خود را به ما بسپارید...
☼ مهمان سرای سه نفری ☼
اعضای آنلاین
    مدیران و نویسندگان
    172 پست 104 پست 4 پست 7 پست 2 پست 0 پست 0 پست 0 پست 2 پست 5 پست 0 پست 0 پست 0 پست 0 پست 1 پست 0 پست 0 پست 0 پست 2 پست 2 پست 0 پست 0 پست

    با سلام خدمت شما سروران گرامی...

    در این بخش از سایت،اسامی و سمت مدیران و نویسندگان سایت قرار گرفته...

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

    یه نکته،هر کس این توانایی رو در خودش میبینه که میتونه نویسنده سایت بشه،با ما در میون بزاره...

    امیدوارم از فعالیت و حضور توی سایت لذت ببرید...

    ☼ پست کده ی سه نفری ☼
    برای این پست 108 لایک ثبت شده است
    به اشتراک بزار...:
    آموزش خاصیت hover در css

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

    نویسنده پست : admin
    تاریخ ارسال پست : دوشنبه 08 ارديبهشت 1393
    ساعت ارسال پست : 11:7
    زیر موضوع : آموزش کدنویسی ,
    بازدید : 5759 بار
    نظرات این پست : نظر

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



    ارسال نظر
    داوود
    پیام داوود در تاریخ 1396/2/16 و ساعت 22:10 به شرح زیر می باشد
    سلام خسته نباشید میخواستم بپرسم داخل تگ استایل که در داخل تگ هامون تعریف میکنیم میشه هاور نوشت
    مثال:

    پاسخ : کدتون ارسال نشده...
    ولی بله موردی نداره...
    گرچه از لحاظ کدنویسی کدهای خارج از فایل css مشکل دارن...
    ensieh
    پیام ensieh در تاریخ 1395/11/5 و ساعت 12:16 به شرح زیر می باشد
    باسلام و خسته نباشید
    من تو نوع نوشتن زیر منوها به مشکل برخوردم. یعنی میخوام تا روی هر قسمت از منو رفتم زیر منو نشون داده بشه و همین طور زیرمنوهای زیرین آن.
    پاسخ : مشکلتون رو توی انجمن مطرح کنید تا کد مورد نظر به شما داده بشه...
    اینجا نمیشه کدها رو ارسال کرد...
    fardin
    پیام fardin در تاریخ 1395/6/21 و ساعت 16:11 به شرح زیر می باشد
    سلام آموزشتون عالی بود فقط ای کاش کدهای دیگه هم میگفتین با خاصیتشون فقظ دوتا مثال زدید
    پاسخ : سلام دوست عزیز...
    سعی میکنم توی ورژن های بعدی اصلاحش کنم...
    امیر
    پیام امیر در تاریخ 1394/10/16 و ساعت 23:38 به شرح زیر می باشد
    سلام
    اموزشتون خیلی خوب بود
    فقط هاور های اماده وجود دارن ک بتونیم از اونا استفاده کنیم؟
    مرسی
    پاسخ : خواهش میکنم...
    وظیفه بود...
    هست ولی باید بگردید...
    من یه سری سایت رو بلد بودم اما یادم رفته...:
    https://www.google.com/search?q=transition+maker&ie=utf-8&oe=utf-8
    فریبرز
    پیام فریبرز در تاریخ 1394/7/3 و ساعت 12:53 به شرح زیر می باشد
    سلام ببخشیدمن یه کدی رو با خاصیت hoverنوشتم که وقتی ماوس میره روش کمی به پاییین کشیده میشه ولی میخوام وقتی که کشیده شد یه divیا یک مطلب توش ایجاد بشه
    میخواستم بدونم چطور این کارو رو باید انجام بدم
    البته من فایل cssو html رو اپلود کردم واین هم ادرسش اگه ممکنه به من توضیح بدین
    خیلی ممنون
    لطفا جواب رو به ایمیلم ارسال کنید اگر مشکلی نیست
    http://worldup.ir/images/wwfvyjav1e05jozm1k.rar
    پاسخ : با سلام خدمت شما همراه گرامی...
    این چیزی که گفتید مشکل نیست...
    فقط باید جایی باشه که بشه توضیح داد...
    توی ایمی نمیشه...
    شما سعی کنید یک تاپیک بزنید توی انجمن تا کمک کنم...
    چون چیزی که ساختید یکی از ترفند های css هم هست...
    و کمی نیاز به توضیحات داره...
    Amin Lord
    پیام Amin Lord در تاریخ 1394/5/27 و ساعت 10:14 به شرح زیر می باشد
    داداش ممنون کارت حرف نداش ممنون
    پیام در تاریخ 1394/5/6 و ساعت 16:57 به شرح زیر می باشد
    ممنون
    مفید بود.
    ( اموزش و فرق id و class رو هم بزار )
    یادته که چقدر بدبختی کشیدی تا یادم دادی ؟
    تبلت فون
    پیام تبلت فون در تاریخ 1394/2/17 و ساعت 22:07 به شرح زیر می باشد
    ممنون مفید بود
    پاسخ : خواهش میکنم عزیز...
    موفق باشید
    maryam
    پیام maryam در تاریخ 1394/1/16 و ساعت 14:43 به شرح زیر می باشد
    با سلام خدمت دوست عزیز
    من از این منوی عمودی که سمت راست سایتتون درست کردن خوشم اومده
    میشه لطف کنید بگید چطوری میتونم همچین چیزی واسه سایتم درست کنم
    اگه ممکنه آموزشش رو برام ایمیل کنید
    مرسی
    پاسخ : سلام مریم خانوم...شرمندتونم...این منو جوری ساخته شده که فقط روی همین قالب کار میکنه...
    یعنی اختصاصی ساخته شده...
    کل امکانات این سایت اختصاصیه...
    ولی شاید بعد از چند مدت قرارش دادم...
    بیتا
    پیام بیتا در تاریخ 1393/6/5 و ساعت 8:31 به شرح زیر می باشد
    سلام می خواستم بپرسم توی مثال بالا که زدید میشه وقتی که کادر آبی رنگ باز میشه داخلش مطلب هم بذاریم ؟
    واینکه چطور این خاصیت رو به divها اضافه کنم ؟؟؟
    پاسخ : باسلام؛بله میشه مطلب هم گذاشت...برای اینکه این استایل رو به یه div خاص (با نام خاص) بدین،کافیه براش یه کلاس انتخاب کنین(مثل نمونه:hov) بعدش بهش استایل بدین و توی کدتون استفاده کنین...ولی اگه می خواین تمامی تگ های div اینطوری بشن(بعید میدونم اینکارو کنین) کافیه توی استایل به جای .hov اینو اضافه کنید:div
    (بدون هیچ نقطه ای در کنار) ولی اینکارو نکنین...اگه متوجه نشدین یه تاپیک تو انجمن ایجاد کنین تا کمکتون کنم...آخه اینجا نمیشه از کد استفاده کرد...ممنون


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی

    ☼ تبادل کده سه نفری ☼
    تبلیغات کانالی

    ارسال اطلاعات کانال جهت تبلیغ
    ارسال پست

    من به عنوان مدیر سه نفری یه چیزی اومد تو ذهنم...

    اونم اینکه هر کسی توی ذهنش یا گوشه کامپیوترش،یه سری کد و بازی و در کل مطلب داره...

    خب حیفه این استعدادها از بین برن،شاید حتی کوچکترین کد شما که به نظرتون به درد نخوره...

    به درد یکی بخوره و بتونه ازش استفاده کنه...

    پس اگه از اون دست آدمایید که همیشه یه چیز برای بقیه دارید تا رو کنید...

    میتونید مطالب خودتون رو برای ما بفرستید تا بعد از تایید شدن در اختیار بقیه قرار بگیرن...

    همین حالا امتحان کنید،فرستادن از شما،تایید از ما...

    نمایش فرم ارسال فقط برای اعضای سایت امکان پذیر است...!!