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

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!

Answers


That's what this is for!

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

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.


Select the div first and then its children, e.g.

$("#mydiv").children(".blurb").show();

here you have another solution using the 'find' function:

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

    );

Need Your Help

menu item is enabled, but still grayed out

objective-c cocoa macos interface-builder nsmenuitem

I have a menu with several items created in interface builder. It looks fine there and 'enabled' is checked.

Are jQuery's hide and slideUp methods equivalent?

jquery hide show slidedown slideup

Do slideUp('slow') and hide('slow') result in the same animation effects?