Mostrar texto al colocar el cursor sobre una imagen

Question

que estoy tratando de lograr de la tarea de mostrar texto a continuación una imagen cuando se pasa sobre ella. No quiero utilizar el atributo title, porque yo quiero ser capaz de estilo del texto.

Un ejemplo sería en Dribbble. Cuando pasa el cursor sobre algunas de las imágenes, el texto PRO aparece junto al nombre de la persona que publicó la imagen

Answer 1

Salida esto rápido JS FIDDLE.

Su 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;} 

y su javascript

$('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(); 
}); 

Esto debe darle una idea de cómo conseguir lo que busca. Obviamente se podría mejorar. Espero eso ayude.

Answer 2

da tu texto dentro de un div y luego muestra ese div en el espacio de la imagen como este ..

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

Answer 3

Defina una función con el argumento como el texto que desea mostrar al desplazar la imagen. Luego, en función de que se crea dinámicamente un div y colocar el texto dentro de ese div y también posicionar dinámicamente el div de acuerdo a la posición del puntero del ratón y también se puede añadir CSS para dar el div ur efectos de estilo. Llame a esta función en el mouseover de la imagen. Espero que esto te ayude.

Answer 4

Yo creo que hay que utilizar información sobre herramientas de jQuery para eso. A continuación se muestran los enlaces desde donde puede encontrar los mejores plugins de información sobre herramientas.

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

Quizás algo como esto http://jsfiddle.net/konglie/SXFEn/