पाठ को दिखाएं जब कर्सर किसी छवि पर होवर

Question

मैं उस छवि के नीचे पाठ प्रदर्शित करने के कार्य को पूरा करने का प्रयास कर रहा हूं जब आप इसे ओवरवर करते हैं। मैं title विशेषता का उपयोग नहीं करना चाहता, क्योंकि मैं पाठ शैली को सक्षम करना चाहता हूं।

एक उदाहरण Dribbble पर होगा। आप तस्वीरों में से कुछ पर होवर करते हैं, पाठ प्रो व्यक्ति जो तस्वीर पोस्ट

Answer 1

बाहर की जाँच करें इस त्वरित JS FIDDLE।

आपका HTML

<ul> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption"><span>this is my caption</span></div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
</ul> 

Css

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;} 
ul li div{display:none; background:white; opacity:.5; position:absolute;} 

और अपने जावास्क्रिप्ट

$('ul li').mouseenter(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeIn(); 
}).mouseleave(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeOut(); 
}); 

यह आप कैसे प्राप्त करने के लिए अपने लिए क्या देख की एक विचार देना चाहिए। यह स्पष्ट रूप से सुधार किया जा सकता है। आशा करता हूँ की ये काम करेगा।

Answer 2

एक div के अंदर अपने पाठ देना और उसके बाद इस तरह छवि के हॉवर पर कि div दिखाने के नाम के आगे दिखाई देता है ..

<div id="div">Hiiii</div> 
$('#img').live('mouseover', function(){ 
$('#div').show(); 
}); 

Answer 3

तर्क के साथ एक फ़ंक्शन को परिभाषित करें जिसे आप छवि को घुमाने पर प्रदर्शित करना चाहते हैं। फिर उस फ़ंक्शन में आप गतिशील रूप से एक div बनाते हैं और टेक्स्ट को उस div के भीतर रखते हैं और गतिशील रूप से माउस पॉइंटर स्थिति के अनुसार div को स्थिति में रखते हैं और आप div के लिए css भी जोड़ सकते हैं जो आपके स्टाइलिंग प्रभाव देते हैं। छवि के माउसओवर पर इस फ़ंक्शन को कॉल करें। उम्मीद है कि यह आपकी मदद करता है।

Answer 4

मुझे लगता है कि आपको इसके लिए jquery टूलटिप का उपयोग करना होगा। नीचे दिए गए लिंक हैं जहां से आप सबसे अच्छे टूलटिप प्लगइन्स पा सकते हैं।

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

http://slodive.com/web-development/best-jquery-tooltip-plugins/

Answer 5

$(function() { 

    $('.bar').css({opacity:0}); 

    $('.foo').hover(function() { 
     $('.bar').stop().animate({ 
      opacity: 1 
     },'fast'); 
    },function() { 
     $('.bar').stop().animate({ 
      opacity: 0 
     },'fast'); 
    }); 

}); 

Answer 6

शायद http://jsfiddle.net/konglie/SXFEn/