On Img Hover show text in another div

Question

I'm trying to find a way to do this:

I've a images with a text inside figure

<figure>
    <img src="" alt="">
    <caption><span class="text">TEXT</span></caption>
</figure>

<figure>
    <img src="" alt="">
    <caption><span class="text">TEXT 2</span></caption>
</figure>


<div id="showhere"></div>

I need when I hover an image to display its text inside another div; <div id="showhere"></div> and when mouse is out to hide the text.

I've tried it like this but I'm not very good with jQuery, just starting to learn it.. Can somebody help me out?

here's a fiddle

Answer 1

This should work

$("img").hover(function(){  //Cursor in handler
    $('#showhere').text(
        $(this).next('caption').find('.text').text()
    );
}, function(){              //Cursor out handler
    $('#showhere').text('');
});

Answer 2

try

$("figure").hover(function() {
   var data=$(this).find(".text").html();
    $("#showhere").hide().stop().html(data).fadeIn();

}, function() {
    $("#showhere").fadeOut();
});

FIDDLE DEMO

Answer 3

How about this?

$("figure").hover(function() {
    $("#showhere").text($(this).find(".text").text());
}, function() {
    $(this).find(".text").fadeOut();
});

Answer 4

This should also do it:

$(document).ready(function(){
    $("img").hover(
       function () {
      $("#showhere").html( $(this).attr("alt") );
       }, 
       function () {
          ("#showhere").html("");
       }
    );
 });

You get much cleaner code by using the alt attribute: http://jsfiddle.net/dH9yb/