How to use JQuery to show a div's child elements only?

Question

So I have this jquery function that's supposed to show a class's hidden span on hover. How do i set up the function so it only shows the selected div's child span (instead of showing all the spans on the page)?

Here's my jquery function:

$(".thumb").hover(
    function() {
       $(".blurb").show();
    },
    function(){
       $(".blurb").hide();
    }
);

You can view the jsfidde here. Thanks!

Answer 1

That's what this is for!

$(".thumb").hover(
    function() {
       $(this).children('.blurb').show();
    },
    function(){
       $(this).children('.blurb').hide();
    }
);

Answer 2

Use $(this).children() instead of executing a global query again:

$(".thumb").hover(function() {
    $(this).children().show();
}, function() {
    $(this).children().hide();
});

Working demo: http://jsfiddle.net/h5x3f/2/

Note: if you're not bothered about supporting Internet Explorer 6, you can avoid jQuery/JavaScript completely and use CSS's :hover pseudo-class, which will even work with JS disabled. Or you could use a shim like ie-7.js to handle :hover for you. See this variation of your fiddle for an example.