PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : [CSS] ظاهر شدن عکس ، نوشته و توضیح در سلكتور hover !



jcs.w
2012/08/07, 03:48 AM
درود !
با یه آموزش بسیار عالی و اختصاصی در خدمت شما هستیمb-)
اول دمو رو ببینید ( این دمو همه ی آموزشو توش داره اما ما تک تک آموزش میدیم) .
http://padz.zzl.org/vbiran/minicss/tiper.html




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

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

<div class="vbiranparssofttiper">
<img src="http://myup.ir/images/20844450377752411588.jpg">
<span><img src="http://www.vbiran.ir/images/vbiranv5/statusicon/forum_new-48.png"/></span>
</div>
اگه این رو خالی و بدون استایل در نظر بگیرید فقط دو تا عکس زیر هم هستن .
اما با اضافه کردن استایل :


.vbiranparssofttiper {

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}


}
.vbiranparssofttiper span { opacity:0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.vbiranparssofttiper:hover span { opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}


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



مرحله دوم: اومدن متن بعد از اوردن موس رو عکس !
این مرحله دقیقا مثله مرحله قبلیه با یکم تغییر ... به این دو تا مشخصه توجه کنید و خودتون متوجه میشید color , line-height


.vbiranparssofttiper {
line-height: 0px;
color: transparent;
font-size: 35px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
font-family:tahoma;
}

.vbiranparssofttiper:hover {
line-height: 30px;
color: black;

}



موفق باشید