کد CSS نمایش متن با آمدن موس روی عکس

کد CSS نمایش متن با آمدن موس روی عکس

کد CSS ظاهر شدن عکس و نوشته و توضیح در سلکتور hover

 

درود !
با یه آموزش بسیار عالی و اختصاصی در خدمت شما هستیمشکلک
اول دمو رو ببینید ( این دمو همه ی آموزشو توش داره اما ما تک تک آموزش میدیم ) .
http://padz.zzl.org/vbiran/minicss/tiper.html

  • مرحله اول : اومدن عکس در صورت اومدن موس روی عکس ! ( کد CSS نمایش متن با آمدن موس )
  • شاید شما هم میخواید یه تولتیپ بسیار زیبا درست کنید . مثلا شما یک عکس که شامل توضیحات هست رو در نظر میگیرید و در نظر دارید با اومدن موس روی یه عکس دیگه اون عکس که شامل توضیحاته بیاد ! ( در دمو عکس آبی عکس اصلیه و عکس کوچیک لوگو وی بی ایران نقش tooltip رو داره ! )

میریم سر آموزش : فرض کنید این کد سورس ما هست :


 .

اگه کد بالا رو بدون استایل در نظر بگیرید فقط دو تا عکس زیر هم هستن .
اما شما می تونید به کد بالا استایل بدید ، این چنین :

( اگه میخواین tooltip بیاد خط پایین یه <br> بزنید )
.

  • مرحله دوم: اومدن متن بعد از اوردن موس رو عکس !
  • این مرحله دقیقا مثله مرحله قبلیه با یکم تغییر ،
  • به این دو تا مشخصه توجه کنید و خودتون متوجه میشید:  color , line-height
  • عملا ما داریم دستور میدیم زمان اومدن موس بر روی آیتم مورد نظرمون که با کلاس ( class=”vbiranparssofttiper” ) مشخص کردیمش ، دو صفت ( attribute ) : ارتفاع لاین و زنگ تغییر کنه.

 .

امیدوارم این آموزش کاربردی بوده باشه.

لازمه عرض کنم ، این مطلب توسط بروبچه های داده پردازان مدرن ویرایش و تکمیل سازی شده ، اصل مطلب به نویسندگی دوست خوبمون : jcs.w بوده .

موفق باشید.

مطالب مرتبط

شما هم در بحث شرکت نمایید...

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *