نمایش و مخفی شدن با رفتن موس روی متن

[amir6268]

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

این کدشو با چی مینویسن؟ جاوا اسکریپت یا از همون استایل هم میشه؟ اگه میشه یه نمونه هم مثال بزنین ...

[ab.ali]

با خیلی زبان ها می شه ولی بهترینش برای راحتی jquery هستش.

[vimax23]

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

این کدشو با چی مینویسن؟ جاوا اسکریپت یا از همون استایل هم میشه؟ اگه میشه یه نمونه هم مثال بزنین ...

نیاز به جاوااسکریپت نیست اینو میتونی با css بسازی
کافیه اون آیتمی که میخوایی نمایش داده بشه در حالت hover دیفالت مخفیش بکنی با display:none;




بعد اینطوری بدی


div:hover{ display:block;}

[amir6268]

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

داخل بعضی سایتها هم هست که مثلا موس وقتی میره روی مطالب یکسری اطلاعات مثل تاریخ و زمان و نویسنده و ... در بالای پست نمایش داده میشه و وقتی موس رو برمیداری اون اطلاعات هم مخفی میشه ... یه حالتی مثل a و hover که به لینکها میدیم ...

اینو کدشو بلدید؟

[ali@hmadi]

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

داخل بعضی سایتها هم هست که مثلا موس وقتی میره روی مطالب یکسری اطلاعات مثل تاریخ و زمان و نویسنده و ... در بالای پست نمایش داده میشه و وقتی موس رو برمیداری اون اطلاعات هم مخفی میشه ... یه حالتی مثل a و hover که به لینکها میدیم ...

اینو کدشو بلدید؟

بلد بودن نمی خواد

با css میشه دیگه ...

البته با jquery خوشگل تر میشه ...

من اینو الان نوشتم ...




کد قبلی برای یک تصویر بود که دوباره نوشتم . کد پایین برای چند تصویر





<style type="text/css">
.lll {
width: 200px;
height: 200px;
border: 2px solid #FF0;
}
.lll .hh {
position: absolute;
color: #FFF;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
padding: 50px;
padding-top: 80px;
display: none;
}
.lll:hover .hh {
display: block;
}
</style>

<div class="lll">
<div class="hh">علی احمدی</div>
<img src="design-01.jpg" width="200" height="200" /> </div>
<div class="lll">
<div class="hh">علی احمدی</div>
<img src="design-01.jpg" width="200" height="200" /> </div>

[vimax23]

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

داخل بعضی سایتها هم هست که مثلا موس وقتی میره روی مطالب یکسری اطلاعات مثل تاریخ و زمان و نویسنده و ... در بالای پست نمایش داده میشه و وقتی موس رو برمیداری اون اطلاعات هم مخفی میشه ... یه حالتی مثل a و hover که به لینکها میدیم ...

اینو کدشو بلدید؟

خب برادر اصل کار با همون display >>> block & none هست منتهی اگر بخوایی با سی اس اس 3 یا جاوا اسکریپت افکتیش کنی باید کد بیشتری بنویسی
در ضمن وقتی شما چیزی میبینی ممکنه توضیح رو بد ارائه کنی ما که تو مغز شما نیستیم :لبخند: لینک یا عکس بزار وگرنه چیزی که نوشتی راه حلش همینا میشه

[ab.ali]

نگاه کن دوست عزیز، دو تا div تو در تو بساز مثل این :



<div class="first">

<div class="second"></div>

</div>



حالا اون div داخلی رو با css پنهان کن:



.second{
display:none}



حالا با jquery بگو اگر .first هاور شد، .second نمایش داده بشه، حالا داخل اون .second هر چی می خواد باشه :



$('.first').hover(function(e) {

$('.second').css('display','block');

});