تایپ سریع فرمول‌های ریاضی در Word

تایپ سریع فرمول‌های ریاضی در Word

ادامه مطلب
آموزش نتورک پلاس (جلسه اول)

آموزش نتورک پلاس (جلسه اول)

ادامه مطلب
آموزش نصب بی نهایت تلگرام در کامپیوتر

آموزش نصب بی نهایت تلگرام در کامپیوتر

ادامه مطلب
برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

ادامه مطلب
رفع مشکل پنهان شدن فایل های USB

رفع مشکل پنهان شدن فایل های USB

ادامه مطلب
آموزش برنامه نویسی سی شارپ (مقدمه)

آموزش برنامه نویسی سی شارپ (مقدمه)

ادامه مطلب
کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

ادامه مطلب
قالب لایه  باز تفریحی

قالب لایه باز تفریحی

ادامه مطلب
ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ادامه مطلب
قالب لایه باز برای رزبلاگ - مدل اول

قالب لایه باز برای رزبلاگ - مدل اول

ادامه مطلب

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

آموزش خاصیت 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>


کامنت ها
: داوود 5 سال پیش

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

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

: ensieh 6 سال پیش

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

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

: fardin 6 سال پیش

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

پاسخ : سلام دوست عزیز...
سعی میکنم توی ورژن های بعدی اصلاحش کنم...

: امیر 7 سال پیش

سلام
اموزشتون خیلی خوب بود
فقط هاور های اماده وجود دارن ک بتونیم از اونا استفاده کنیم؟
مرسی

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

: فریبرز 7 سال پیش

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

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

: Amin Lord 7 سال پیش

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

: 7 سال پیش

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

: تبلت فون 8 سال پیش

ممنون مفید بود

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

: maryam 8 سال پیش

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

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

: بیتا 8 سال پیش

سلام می خواستم بپرسم توی مثال بالا که زدید میشه وقتی که کادر آبی رنگ باز میشه داخلش مطلب هم بذاریم ؟
واینکه چطور این خاصیت رو به divها اضافه کنم ؟؟؟شکلک

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

تایپ سریع فرمول‌های ریاضی در Word

تایپ سریع فرمول‌های ریاضی در Word

ادامه مطلب
آموزش نتورک پلاس (جلسه اول)

آموزش نتورک پلاس (جلسه اول)

ادامه مطلب
آموزش نصب بی نهایت تلگرام در کامپیوتر

آموزش نصب بی نهایت تلگرام در کامپیوتر

ادامه مطلب
برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

ادامه مطلب
رفع مشکل پنهان شدن فایل های USB

رفع مشکل پنهان شدن فایل های USB

ادامه مطلب
آموزش برنامه نویسی سی شارپ (مقدمه)

آموزش برنامه نویسی سی شارپ (مقدمه)

ادامه مطلب
کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

ادامه مطلب
قالب لایه  باز تفریحی

قالب لایه باز تفریحی

ادامه مطلب
ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ادامه مطلب
قالب لایه باز برای رزبلاگ - مدل اول

قالب لایه باز برای رزبلاگ - مدل اول

ادامه مطلب
نام کاربری :
رمز عبور :
تکرار رمز :
موبایل :
ایمیل :
نام اصلی :
کد امنیتی :
 
کد امنیتی
 
بارگزاری مجدد