jQuery mouseover mouseout event on a <span> when hover over a div

Question

I am trying to make a title appear and disappear over a thumbnail. This is my title span:

<span class="thumbtitle"><?php the_title(); ?></span>

This is inside an <li> tag with a class of "thumb".

The jQuery i am using is:

<script type='text/javascript'>
$(document).ready(function() {
  //settings
  var opacity = 0, toOpacity = 1, duration = 0;
  //set opacity ASAP and events
  $('.thumbtitle').css('opacity',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );
});
</script>

Now this works perfectly, but it works when i hover over the title... i would like it to trigger when i hover over the thumbnail rather than where the title is positioned, so that when the mouse goes over the thumbnail (anywhere on it) the title appears.

Can someone help me do this? Also, can i give it an animation effect.. so that it gradually appears and disappears, rather than just instantly appear and disappear?

Miro

Answer 1

here is the updated one :-

<script type='text/javascript'>
   $(document).ready(function() {
   //settings
   var opacity = 0, toOpacity = 1, duration = 0;
   //set opacity ASAP and events
   $('li.thumb').hover(function() {
      $(this).children('.thumbtitle').fadeTo(duration,toOpacity);
    }, function() {
      $(this).children('.thumbtitle').fadeTo(duration,opacity);
    }
  );
});
</script>

Answer 2

If you don't want it show on pageload, set the initial opacity to 0, and set it to 1 when hovered on...

Answer 3

Acording on the title of you question, i suposed that you html looks something like this

This is the thumbnail:
<div class="thumbnail">
    <li class="thumb">
        <span class="thumbtitle">Title<span>
    </li>
</div>

Check this out:

DEMO

$(document).ready(function() {

    // Start with no title visible.
    $('.thumb').hide();

    //settings
    var opacity = 0, toOpacity = 1, duration = 0;
    //set opacity ASAP and events

    $('.thumbnail').hover(function() {
        $(this).children('.thumb').fadeTo(duration , toOpacity );
    }, function() {
        $(this).children('.thumb').fadeTo(duration , opacity );
    });
});